JS Infinite Scroll

时间:2018-01-24 15:47:46

标签: javascript jquery scroll infinite

我使用此https://infinite-scroll.com

对于正常滚动页面,它开箱即用。

我遇到了一个问题,我的页面顶部有一个常规导航。我想要完成的是:

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

每个页面以div和ID开头,例如

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页。欢迎任何帮助

1 个答案:

答案 0 :(得分: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 );
        }
    }

这种做法很有效但我觉得我正在通过这个黑客攻击