title: jQuery: infinite scroll and the back button
body: <p>OK so I know this causes problems with everyone, and it's causing problems with me too. I'm using the infinite scroll plugin on a client's site, in combination with the isotope plugin to load in their products sequentially, the problem is though as they have 1000's of products, anyone browsing the site then clicking into a product, when they click the back button they'll be returned back to the top (or just above the fold of page one), which is causing quite a lot of issues.</p>
  
  <p>My markup is as follows below:</p>
  
  <pre><code>$(window).load(function () {
  
      var $container = $('.products-grid-wrap');
  
      $container.imagesLoaded(function () {
          $container.isotope({
              itemSelector: '.products-grid-block',
              filter: '*:not(.hidden), .products-grid-block',
              animationEngine: 'best-available',
              layoutMode: "perfectMasonry",
              perfectMasonry: {
                columnWidth: 280,
                rowHeight: 310
              }
          });         
  
          $container.infinitescroll({
              navSelector: '#page_nav', // selector for the paged navigation 
              nextSelector: '#page_nav a', // selector for the NEXT link (to page 2)
              itemSelector: '.regular-product-block, .products-grid-block', // selector for all items you'll retrieve
              pixelsFromNavToBottom: Math.round($(window).height() * 1.5),
              bufferPx: Math.round($(window).height() * 1.5),
              loading: {
                  finishedMsg: 'No more products to load.',
                  img: 'http://www.by-form.net/wp-content/uploads/2014/11/ajax-loader-big.gif'
              }
          },
          // call Isotope as a callback
          function (newElements) {
              var $newElems = $(newElements);
              $newElems.imagesLoaded(function () {
                  $container.isotope('insert', $newElems);
                  $('.products-grid-rollover-block').hide();                 
                     if(newElements.length &gt; 0){
                         setTimeout(function () {
                              $container.infinitescroll('retrieve');
                              $('.products-grid-wrap').isotope('reLayout');
                              //$('.products-grid-wrap').isotope({
                              //sortBy: 'category',
                                  //sortAscending: false });
                          }, 1000);
                     }
  
              });
          }); 
  
          setTimeout(function () {
              $container.infinitescroll('retrieve');
          }, 3000); 
  
      });
  
  });
  </code></pre>
  
  <p>Any solutions or suggestions would be massively appreciated!</p>