Function to scroll a page down until certain content is reached

Question

I am working on a paginated infinite scroll page. In the menu I am making a button that triggers a function which scrolls down (100px at a time) until certain content (page3.html) is loaded.

function GOindex() {
while (urllist.includes('page3.html') == false) {
var y = $(window).scrollTop(); 
$(window).scrollTop(y+100);
};
}

New pages are loaded at the moment the end of the page is reached. The html addresses of the new pages are appended in urllist. I am using a while loop to scroll down until page3.html appears in the urllist.

Unfortunately the script gets stuck when I press the button. I think this is because the while loop is too fast and multiple scroll events are triggered on top of each other.

Is there a better way to do this?

score 0 · Answer 1 · answered Jul 23 '17 at 13:13

Ok, I got it to work like this:

function GOindex() {
if (urllist.includes('page3.html') == false) {
  var y = $(window).scrollTop();  //your current y position on the page
  $(window).scrollTop(y+100);
  console.log("100 down");
  setTimeout(GOindex, 1);
 }
 else {
  console.log("page3.html loaded, stop scrolling");
 }
};

Found the answer in this question. It might not be super elegant in my case but it works well! Basically it is better to use an if statement and loop the function with a timeout.

Function to scroll a page down until certain content is reached

1 Answers1