滚动到缓动不适用于无限 js。滚动到缓和与无限 js 冲突

Question

请在两个页面上查看源代码。

本页：_p1.html是"page 1"使用浏览器右侧的滚动条一直向下滚动到页面底部。 "page 2" 会出现。我正在使用无限滚动 js。

我还使用缓动滚动到锚点。再次返回页面顶部： _p1.html 单击 "scroll down to item A" 它会缓缓向下滚动到页面中间。现在，向下滚动更多。第 2 页加载。伟大的。现在，点击 "scroll down to item B" 项目 B 在本应使用缓动滚动时直接跳转到中间页面。

怎么了？我该如何解决这个问题？

如果您在此处直接转到第 2 页：_p2.html 单击项目 B。您将看到缓动效果。但是当在第 1 页和无限 js 上时，缓动滚动不起作用。

怎么了？我该如何解决这个问题？

在页面加载时触发 js 滚动，当新内容加载到页面时不会再次 运行。因此，滚动效果不会作用于加载到页面（page2、page3 等）的任何其他内容。我们需要找到一种方法来在引入新内容并将其加载到页面时重新触发 javascript。

Answer 1

您可以将事件处理程序附加到父级，在这种情况下，我使用了 $(document) 但为了避免过多的开销，使用最近的父级，然后告诉 jQuery 仅冒泡事件到'.page-scroll'。这样，如果将任何新元素添加到具有 class page-scroll 的文档中，此事件也将附加到它们。

$(function() {
    $(document).on('click', '.page-scroll', function(e) {
        e.preventDefault();
        var $anchor = $(e.target);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 2500, 'easeInOutExpo');
    });
});

编辑

为了在您的脚本可能被多次包含的情况下工作，您必须确保只加载 jQuery、bootstrap 和 jasny 一次，然后包装其余部分window.onload 事件处理程序中的脚本。由于 window 只加载一次，如果在加载 window 之后包含脚本，它将不会被执行。

我还减少了包含的 jquery 缓动，只包括 easeInOutExpo，这是您在函数中使用的缓动。

将每个页面上的 所有 脚本替换为以下脚本。

<script>
if (typeof jQuery == 'undefined') {
    var newJQuery = document.createElement('script');
    newJQuery.type = 'text/javascript';
    newJQuery.src = 'https://code.jquery.com/jquery-2.1.1.min.js';
    document.body.appendChild(newJQuery);
    window.jQueryInterval = window.setInterval(function(){
        if(typeof jQuery != 'undefined') {
            window.clearInterval(window.jQueryInterval);
            var newBootstrap = document.createElement('script');
            newBootstrap.type = 'text/javascript';
            newBootstrap.src = 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js';
            document.body.appendChild(newBootstrap);
            var newJasny = document.createElement('script');
            newJasny.type = 'text/javascript';
            newJasny.src = 'https://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/js/jasny-bootstrap.min.js';
            document.body.appendChild(newJasny);
            /******************************************
              Infinite jQuery Scroll
              @author Fabio Mangolini
              http://www.responsivewebmobile.com
            ******************************************/
            //location.href = 'index.html#start';
            var pages = []; //key value array that maps the pages. Ex. 1=>page2.html, 2=>page3.html
            var current = 0; //the index of the starting page. 0 for index.html in this case
            var loaded = []; //key value array to prevent loading a page more than once
            //get all the pages link inside the #pages div and fill an array
            $('#pages a').each(function(index) {
                pages[index] = $(this).attr('href');
                loaded[$(this).attr('href')] = 0; //initialize all the pages to be loaded to 0. It means that they are not yet been loaded.
            });
            //on scroll gets when bottom of the page is reached and calls the function do load more content
            $(window).scroll(function() {
                //Not always the pos == h statement is verified, expecially on mobile devices, that's why a 300px of margin are assumed.
                if ($(window).scrollTop() + $(window).height() >= $(document).height() - 300) {
                    console.log("bottom of the page reached!");
                    //in some broswer (es. chrome) if the scroll is fast, the bottom 
                    //reach events fires several times, this may cause the page loaging 
                    //more than once. To prevent such situation every time the bottom is 
                    //reached the number of time is added to that page in suach a way to call 
                    //the loadMoreContent page only when the page value in "loaded" array is 
                    //minor or equal to one
                    loaded[pages[current + 1]] = loaded[pages[current + 1]] + 1;
                    if (loaded[pages[current + 1]] <= 1)
                        loadMoreContent(current + 1);
                }
            });
            //loads the next page and append it to the content with a fadeIn effect. 
            //Before loading the content it shows and hides the loaden Overlay DIV
            function loadMoreContent(position) {
                //try to load more content only if the counter is minor than the number of total pages
                if (position < pages.length) {
                    $('#loader').fadeIn('slow', function() {
                        $.get(pages[position], function(data) {
                            $('#loader').fadeOut('slow', function() {
                                $('#scroll-container').append(data).fadeIn(999);
                                current = position;
                            });
                        });
                    });
                }
            }
            jQuery.extend(jQuery.easing, {
                easeInOutExpo: function(e, f, a, h, g) {
                    if (f === 0) {
                        return a;
                    }
                    if (f === g) {
                        return a + h;
                    }
                    if ((f /= g / 2) < 1) {
                        return h / 2 * Math.pow(2, 10 * (f - 1)) + a;
                    }
                    return h / 2 * (-Math.pow(2, -10 * --f) + 2) + a;
                }
            });
            /*jQuery to collapse the navbar on scroll
            $(window).scroll(function() {
                if ($(".navbar").offset().top > 50) {
                    $(".navbar-fixed-top").addClass("top-nav-collapse");
                } else {
                    $(".navbar-fixed-top").removeClass("top-nav-collapse");
                }
            });
            */
            //jQuery for page scrolling feature - requires jQuery Easing plugin

            $(document).on('click', '.page-scroll', function(e) {
                var $anchor = $(this);
                $('html, body').stop().animate({
                    scrollTop: $($anchor.attr('href')).offset().top
                }, 2500, 'easeInOutExpo');
                e.preventDefault();
            }); 
     }
    },1);
};
</script>