jQuery: infinite scroll and the back button

Question

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.

My markup is as follows below:

$(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 > 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); 

    });

});

Any solutions or suggestions would be massively appreciated!

Answer 1

You can try scroll-frame.It is a bit old may be the answer for you. Here is a link to an infinite scroll demo using it.

scrollFrame will hijack the user's click for elements that match the query selector you pass in and instead of reloading the page it will append a modal-like iframe that sits on top of your viewport and points to the element's href. It then uses HTML5 history APIs to make the back-button function as expected.

Answer 2

This can be a bit new solution of such problems. https://github.com/highrisehq/snapback_cache

This is what is say's ...

Many apps today have some concept of an infinite scrolling feed: Facebook, Twitter, LinkedIn and many more. Almost all of them suffer from the same problem. If you click on something in the feed that brings you to a new page, when you hit the back button or try to return to that original feed, your place is lost. All the scrolling is gone. At Highrise we had that same problem. So this is the library we use to fix that. We call it our Snapback Cache, and it's made a big improvement to how people can use infinite scroll in our app and still get a lot of work done without losing their place.