CODEWITHSUNDEEP
javascriptjqueryscrollinfinite
Leen Balsters
Leen Balsters

Reputation: 25

JS Infinite Scroll

I use this https://infinite-scroll.com

For normal scrolling through pages it works great out of the box.

I have a problem though, I have a regular navigation at the top of my page. What I would like to accomplish is this:

Visitor enters site. page-1 is loaded Visitor clicks Page-3 in my navigation, I would like page-2 to load and then page-3 and automatically scroll down to page-3

each page starts with a div with and ID e.g. 

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

    } );

I have tried many different things to accomplish this but I cant seem to get it to work. The next page loads but i have to click to link until page-3 is finally loaded. Any help is welcome

Upvotes: 0

Views: 759

Answers (1)

Leen Balsters
Leen Balsters

Reputation: 25

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 );
        }
    }

This kind of did the trick but I feel like I am hacking my way through this

Upvotes: 1

Related Questions