Repeatedly scroll infinite scrolling page with jquery

Question

I want to repeatedly scroll to the bottom of the page and back up every 40ms.

$("html, body").animate({ scrollTop: $(document).height() }, 400);
setTimeout(function() {
   $('html, body').animate({scrollTop:0}, 400); 
},400);
setInterval(function(){
$("html, body").animate({ scrollTop: $(document).height() }, 400);
setTimeout(function() {
   $('html, body').animate({scrollTop:0}, 400); 
},40);

},80);

So far so good. Only problem is, the page I want to scroll uses infinite scrolling, i.e. each time I scroll to the bottom of the page, the page height ($(document).height()) changes. So instead of scrolling the entire page, it keeps scrolling the same distance as the original height of the page.

The point of the script is to get the full content of the page after scrolling it to the very bottom (i.e. such a number of times that scrolling it once more would not increase the content of the page any longer). How can I modify this script so that it scrolls to the very bottom of the page each time the page height increases?

norcal johnny · Answer 1 · 2016-11-01T05:43:24.443

0

Have you considered using code like this

$(document).height() - win.height() == win.scrollTop())

or

$(window).scroll(function () { 
   if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
      //Add something at the end of the page
   }
});

edited Nov 01 '16 at 05:43

answered Nov 01 '16 at 05:38

norcal johnny

1,850
1
11
17

score 0 · Answer 2 · answered Nov 01 '16 at 06:09

Here is something you could try.
I did not test it... I just wrote it like this.

To initialise it on load, It needs to have two different values in the two Height_ variables.

There is also delays for animation up and down...
Those can be as short as you want.

There is a delay to let the infinite scroll function load the new content.
This one needs to be adjusted wisely.

It should work...

var Height_actual=1;
var Height_mem=0;

var animateDelay_down=400;
var animateDelay_up=400;
var infiniteDelay_load=800;

function forceInfinite(){

    // Force infinite scroll to load all it's content
    // IF the last known height is NOT the same as the actual.
    if(Height_actual!=Height_mem){

        // Keep the actual height in "memory" for the next iteration.
        Height_mem=$(document).height();

        // Going to the bottom
        $("html, body").animate({ scrollTop: actualHeight }, animateDelay_down);

        // At the end of the animation
        // PLUS a delay for the infinite scroll to load the new content.
        setTimeout(function() {
            // Possibly a new height to keep in "memory".
            Height_actual=$(document).height();

            // OK, going back to top
            $('html, body').animate({scrollTop:0}, animateDelay_up);

        },animateDelay_down+infiniteDelay_load);

        // Restart the function after all delays.
        setTimeout(function() {
            forceInfinite();
        },animateDelay_down+infiniteDelay_load+animateDelay_up);
    }
}

// Init
forceInfinite();

Repeatedly scroll infinite scrolling page with jquery

2 Answers2