jQuery:无限滚动和后退按钮 [英] jQuery: infinite scroll and the back button

问题描述

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

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.

我的标记如下:

$(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!

推荐答案

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

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将劫持用户单击的元素，以匹配与您传入的查询选择器匹配的元素，而不是重新加载页面，它会在视口顶部附加一个类似于模式的iframe，并指向该元素的href.然后，它使用HTML5历史记录API来使后退按钮功能达到预期的效果.

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.

这篇关于jQuery:无限滚动和后退按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！