7

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!

user1374796
  • 1,544
  • 13
  • 46
  • 76
  • 1
    Could you store the item they clicked on in a global variable and then have the page scroll back to that item when they click on the back button? Sorry if that's not helpful, I'm a noob at jQuery. – kairocks2002 Feb 03 '16 at 16:11

3 Answers3

4

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.

Macsupport
  • 5,406
  • 4
  • 29
  • 45
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.

Syed Ekram Uddin
  • 2,907
  • 2
  • 29
  • 33
1

We solved this problem with a combination of (1) opening the page linked to on the infinite scroll page in a new tab; (2) using javascript to return to the parent.

Since I have seen a lot of comment about the difficulty of returning to the parent, I am posting our code for that below. The two functions are put into onclick attributes in the anchor tags used for the navigation buttons.

Using the name of the parent window solves the problem of intervening tabs opened before returning to the parent; without this, the tab returned to could be the most recently opened tab, rather than the parent.

/**
 * open url in separate tab
 * saves name of parent window for easy return
 * @param url
 */
function gotoTab(url)
{
    window.name = 'parent';
    window.open(url);
}

/**
 * uses name of parent
 */
function returnToParent()
{
    var goBack = window.open('', window.opener.name);
    window.top.close();
    goBack.focus();
}
Jeffrey Simon
  • 918
  • 3
  • 11
  • 25
  • Your answer is up to date and very good. While doing research on this subject, I saw your comment and tried it. It's working. I logged into my account just to post this comment :) My question is, do you continue to use this method? Or did you find a better solution? – yigit Jan 18 '23 at 20:10
  • We continue to use this method. It works most of the time without issues. A possible issue that could come up is that the user could close the parent tab, then go back to the child tab and try to return to the parent. That would put them in an unexpected state. But we have not had reports from users about it being a problem. – Jeffrey Simon Jan 20 '23 at 20:00