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

Question

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

在这个页面上：_p1.html 是“第 1 页” 使用浏览器右侧的滚动条一直滚动到页面底部。将出现“第 2 页”。我正在使用无限滚动js。

我也使用滚动来缓动锚点。再次回到页面顶部： _p1.html 点击“向下滚动到 A 项” 它以缓动方式向下滚动到页面中间。现在，向下滚动更多。第 2 页加载。伟大的。现在，点击“向下滚动到项目 B”，项目 B 会在它应该使用缓动滚动时跳转到中间页面。

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

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

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

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

Answer 1

您可以将事件处理程序附加到父级，在这种情况下，我使用了 $(document) 但为了避免过多的开销，请使用最近的父级，然后告诉 jQuery 仅将事件冒泡到 '.page-scroll '。这样，如果将任何新元素添加到具有 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 事件处理程序中。由于窗口只加载一次，如果在窗口加载后包含脚本，则不会执行。

我还减少了包含的 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>