JS Infinite Scroll

Question

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

So you mean you do not want to skip the loading of page-2 when user clicks on page 3 ? — pixlboy
– pixlboy, Commented Jan 24, 2018 at 15:52
No i would like page 2 to load and then page 3 as if the user scrolls down to page 3 manually — Leen Balsters
– Leen Balsters, Commented Jan 24, 2018 at 15:59
while ( checkAnchor( anchor ) == false ) I don't use infinate-scroll, but this piece of code is sync, the loading of the page is going to be async, so you can't do that. Ideally, Infinate-scroll could do with a pageLoaded callback you could use, but if your pages have specific tags / ids then you could wait using a setInterval callback. — Keith
– Keith, Commented Jan 24, 2018 at 16:02

Leen Balsters · Accepted Answer · 2018-01-24 17:29:26Z

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

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

answered Jan 24, 2018 at 17:29

Leen Balsters

257 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JS Infinite Scroll

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related