JS无限滚动答案

【问题标题】：JS Infinite ScrollJS无限滚动
【发布时间】：2018-07-03 17:33:00
【问题描述】：

对于正常滚动页面，它开箱即用效果很好。

我有一个问题，我的页面顶部有一个常规导航。我想要完成的是：

访客进入网站。第 1 页已加载访问者在我的导航中单击第 3 页，我希望加载第 2 页，然后加载第 3 页并自动向下滚动到第 3 页

每个页面都以一个带有和 ID 的 div 开头，例如

function checkAnchor( anchor ) {

        if ( $( anchor ).length ) {
            return true;
        } else {

            $( '.article-feed' ).infiniteScroll( 'loadNextPage' );
            checkAnchor( anchor );
        }       

    }

$( document ).on( 'click', 'a[href^="#"]', function ( event ) {

        event.preventDefault();

        anchor = $.attr( this, 'href' );

        while ( checkAnchor( anchor ) == false ) {              

            $( '.article-feed' ).infiniteScroll( 'loadNextPage' );

        }

        $( 'html, body' ).animate( {
            scrollTop: $( $.attr( this, 'href' ) ).offset().top
        }, 700 );

    } );

我已经尝试了很多不同的方法来实现这一点，但我似乎无法让它发挥作用。下一页加载，但我必须单击链接，直到第 3 页最终加载。欢迎任何帮助

【问题讨论】：

所以你的意思是当用户点击第 3 页时你不想跳过第 2 页的加载？
不，我希望加载第 2 页，然后加载第 3 页，就像用户手动向下滚动到第 3 页一样
是的，我就是这个意思
你能加一个codepen或fiddle / plunkr吗？
while ( checkAnchor( anchor ) == false )我没有使用infinate-scroll，但是这段代码是sync，页面的加载会是async，所以不能这样.理想情况下，Infinate-scroll 可以使用您可以使用的 pageLoaded 回调，但如果您的页面有特定的标签/ID，那么您可以使用 setInterval 回调等待。

标签： javascript jquery scroll infinite

【解决方案1】：

function checkAnchor( anchor ) {

        if ( $( anchor ).length ) {
            return true;
        } else {
            setInterval( function () {

                $( '.article-feed' ).infiniteScroll( 'loadNextPage' );

                var lastAnchor = "#" + $( ".anchor" ).last().attr( 'id' );

                if ( anchor == lastAnchor ) {
                    $( 'html, body' ).animate( {
                        scrollTop: $( anchor ).offset().top
                    }, 500 );
                    return true;
                } 

            }, 100 );
        }
    }

这种方法成功了，但我觉得我正在破解这个方法

【讨论】：