Autoscroll for collection page - Shopify

collection.liquid

{% comment %} 
<a href="#" class="scrollup"></a>
{% endcomment %}

<section class="content content-area">

  {% include 'breadcrumbs' %}

{% capture collection_url %}{% if collection.url.size == 0 %}/collections/all{% else %}{{ collection.url }}{% endif %}{% endcapture %}
<div class="page-title">
    	<span class="label">{{ collection.title }}</span>
  
      {% if collection.all_tags.size > 0 %}
      <div class="tags-wrap preload">
        <select class="coll-filter styled-select tags-dropdown">
          <option value="">All</option>
          {% for tag in collection.all_tags %}
            {% if current_tags contains tag %}
              <option value="{{ tag | handle }}" selected>{{ tag }}</option>
            {% else %}
              <option value="{{ tag | handle }}">{{ tag }}</option>
            {% endif %}
          {% endfor %}
        </select>
  
        <ul class="tags">
          {% for tag in collection.all_tags %}
           <li class="tag show">{{ tag | link_to_tag: tag }}</li>
          {% endfor %}
        </ul>
      </div>
      {% endif %}
  </div>

  
{% paginate collection.products by settings.products-per-page %} 
  {% if collection.products.size == 0 %}
    <p class="empty">No products in this collection</p>
  {% else %}

    {% if collection.description.size > 0 or settings.collection-top-pagination %}
      {% if collection.description.size > 0 or paginate.previous or paginate.next%}
      <div class="collection-header clearfix"> 
        <div class="description rte">{{ collection.description }}</div> 
      </div>
      {% endif %}
    {% endif %}

    <ul class="paginated-products product-list {{ settings.products-per-row }}">
    {% for product in collection.products limit: settings.products-per-page %}{% include 'product-item' %}{% endfor %}
    </ul>
  {% endif %} 
           
  {% if paginate.next %}
      <div id="more-products"><p>&darr; <a href="{{ paginate.next.url }}">More</a></p></div>        
  {% endif %}
  
   <div id="product-list-foot"></div>
      
{% endpaginate %}
</section> 
 
  
{{ 'jquery.ba-dotimeout.min.js' | asset_url | script_tag }}
<script type="text/javascript"> 
  var QueryString = function(url){
    var segments = url.split('?');
    if(segments.length>1){
        var query = segments[1].split('&');
        if (query == "") return {};
        var b = {};
        for (var i = 0; i < query.length; ++i)
        {
          var p=query[i].split('=');
          if (p.length != 2) continue;
          b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
        }
        return b; 
  	}
    return {};
  } ;
  
  var getNextPageInfo = function (){
    var info = {};
    info.nextUrl = scrollMoreHref.length > 0 ? scrollMoreHref.attr("href") : null;
    info.nextPage = info.nextUrl != null ? parseInt("10", QueryString(info.nextUrl).page) : null;
    return info;
  };
   
  
  var incrementNextPageInfo = function (nextPageInfo){
    var info = {};
    info.nextPage = nextPageInfo.nextPage + 1;
    info.nextUrl = nextPageInfo.nextUrl.replace('page=' + nextPageInfo.nextPage, 'page='+info.nextPage); 
    scrollMoreHref.attr("href", info.nextUrl);
    return info;
  };
  
  var pInfScrLoading = false;
  var pInfScrDelay = 200;
  
  var scrollNode = $('#more-products').last();    
  var scrollMoreHref = $('#more-products p a').last() ;
   
  var NextPageInfo = getNextPageInfo();
    
  function ScrollExecute() {
    
    var supportsScroll = $(document).height() - 800 < ($(document).scrollTop() + $(window).height());
    if(!pInfScrLoading && supportsScroll) {   
      if(scrollNode.length > 0 && NextPageInfo.nextPage != null) {
        $.ajax({
          type: 'GET',
          url: NextPageInfo.nextUrl,
          beforeSend: function() {
            pInfScrLoading = true;
            $('<div id="more-products"></div>').insertAfter($('.paginated-products').last()).append('<img src=\"{{ "loading.gif" | asset_url }}\" />');
            scrollNode.hide();
          },
          error:function(error){pInfScrLoading = false;},
          success: function(data) {
            // remove loading feedback 
            $('.paginated-products').last().next().remove();   
            var filteredData = $(data).find(".paginated-products"); 
            if(filteredData.length>0){ 
              {% if settings.quick_shop_enabled %}
                if ($(window).width() >= 959) {
                  filteredData.find(".quick_shop").leanModal();
                }
              {% endif %}
              
               //switch image on mouwse hover
               /*filteredData.find('.single-product .image').each(function(){
                 if($(this).find('img').length > 1) { 
                   $(this).hover(function(){
                     $(this).find('.img2').stop(true,true).fadeIn("1000");
                     $(this).find('.img1').stop(true,true).fadeOut("1000").css("display", "none");
                   }, function(){
                     $(this).find('.img2').stop(true,true).fadeOut("1000").css("display", "none");
                     $(this).find('.img1').stop(true,true).fadeIn("1000");
                   });
                 }
               });*/
                
                filteredData.insertBefore(  $("#product-list-foot") ); 
                
               //update the href for next page 
                NextPageInfo = incrementNextPageInfo(NextPageInfo);
              }else{ 
                NextPageInfo.nextUrl = null;
                NextPageInfo.nextPage = null;
              }
               
              pInfScrLoading = false;
             },
               dataType: "html"
            });
          }
        } 
               };
               
               $(document).ready(function () {
          $(window).scroll(function(){
            $.doTimeout( 'scroll', pInfScrDelay, ScrollExecute);
            if( $(document).height() - 800 > $(document).scrollTop() + $(window).height() ) {
              pInfScrDelay = 250;
            }
          });
          
          {%comment %} 
          //scrollarrow
          var scrollUp = $('.scrollup'); 
           $(window).scroll(function(){
             if ($(this).scrollTop() > 100) {
               $('.scrollup').fadeIn();
             } else {
               $('.scrollup').fadeOut();
             } 
             
           }); 
           
           scrollUp.click(function(e){
             $('body,html').animate({ scrollTop: "0" }, 600 );
             e.preventDefault();
           }); 
           {% endcomment %}
           }); 
           
</script>