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

Question

请查看两页上的源代码。

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

我还使用滚动来缓动 anchor 。再次返回到页面顶部: _p1.html 单击“向下滚动到项目 A” 它会缓慢地向下滚动到页面中间。现在，进一步向下滚动。第 2 页加载。伟大的。现在，点击“向下滚动到项目 B”，当项目 B 应该以缓动方式滚动时，它会跳到中间页面。

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

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

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

滚动到 js 在页面加载时触发，并且在新内容加载到页面时不会再次运行。因此，滚动效果不会对加载到页面(第 2 页、第 3 页等)中的任何其他内容起作用。我们需要找到一种方法，在引入新内容并将其加载到页面中时重新触发 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 缓动，仅包含 escapeInOutExpo，这是您在函数中使用的缓动。

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

<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>