"Infinite" (non-auto) scrolling in Shopify collections

collections.liquid.html

{% paginate collection.products by 20 %}
<ul class="collection-matrix">
 {% for product in collection.products %}
 <li id="product-{{ forloop.index | plus:paginate.current_offset }}">
  {% include 'product' with product %}
 </li> 
 {% endfor %}
 <li class="top"><a href="#collectionpage">Back to Top</a> &uarr;</li>        
 {% if paginate.next %}
  <li class="more">&darr; <a href="{{ paginate.next.url }}">More</a></li>        
 {% endif %}
</ul>
<div id="product-list-foot"></div>
{% endpaginate %}}

plugins-collection.js

var pInfScrLoading = false;
var pInfScrDelay = 250;
function pInfScrExecute() {
	pInfScrNode = $('.more').last();	
	pInfScrURL = $('.more a').last().attr("href");
	if(pInfScrNode.length > 0 && pInfScrNode.css('display') != 'none') {
		$.ajax({
			type: 'GET',
			url: pInfScrURL,
			beforeSend: function() {
			  pInfScrLoading = true;
			  pInfScrNode.clone().empty().insertAfter(pInfScrNode).append('<img src=\"http://cdn.shopify.com/s/files/1/0068/2162/assets/loading.gif?105791\" />');
			  pInfScrNode.hide();
			},
			success: function(data) {
				// remove loading feedback
				pInfScrNode.next().remove();
				pInfScrNode.remove();
				var filteredData = $(data).find(".collection-matrix");
				filteredData.insertBefore( $("#product-list-foot") );					
				pInfScrLoading = false;
				$('li.singleproduct').setAllToMaxHeight();
				attachClickEvent();
			},
			dataType: "html"
		});

	}
}

function attachClickEvent(){
	$('li.more a').click(function(event){
		pInfScrExecute();
		event.stopPropagation();
		return false;
	});
}

theme.liquid.html

$(document).ready(function () {
	attachClickEvent();
});

It is working for me but the problem is that it work for one next page only for page=2 , why did not move to next page=3,page=4....

Having the same issue ^

Thank you so much for this Ricky! It's working perfectly.

Code never dies! ☠️ You’re welcome @steph-periscope ♥️