jQuery：无限滚动和后退按钮

Question

好的，所以我知道这会引起每个人的问题，并且也会引起我的问​​题。我在客户端站点上使用无限滚动插件，并与同位素插件结合使用，以按顺序加载其产品，但问题是，由于他们有1000多种产品，因此任何人浏览该站点然后单击某个产品，当他们单击后退按钮，它们将返回顶部（或恰好在第一页的折叠上方），这会引起很多问题。

我的标记如下：

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

    });

});

任何解决方案或建议将不胜感激！

Answer 1

您可以尝试滚动框架。它有点旧可能是您的答案。这是使用它的无限滚动演示的链接。

scrollFrame 将劫持用户对与您传入的查询选择器相匹配的元素的点击，并且不会重新加载页面，而是会附加一个位于视口顶部并指向元素的 href 的类似模式的 iframe。然后，它使用 HTML5 历史记录 API 使后退按钮按预期运行。