6

I need a javascript on a webpage that I want to display on a local quiz. The page shows the score table, but with 60 teams, I cannot show them all at once. So I want to add a javascript to the page that slowly scrolls down, and when the page is at the bottom, it should wait 2 seconds then jump back to the page top and start scrolling down again.

At https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_scrollto I used this script:

<!DOCTYPE html>
<html>
<head>
<style>
body {
    width: 500px;
}
</style>
</head>
<body onLoad="pageScroll()">

<h1>Scores</h1>

test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>

<script>

function pageScroll() {
     window.scrollBy(0,10); // horizontal and vertical scroll increments
     scrolldelay = setTimeout('pageScroll()',100); // scrolls every 100 milliseconds
            if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
          scrolldelay = setTimeout('PageUp()',2000);
      }

}

function PageUp() {
 window.scrollTo(0, 0);
}

</script>

</body>
</html>

The scrolling speed will be altered, this is too fast but just for testing. The script seems to do the job, but when jumping to the top of the page, there are some "hickups" before scrolling down again. Can anyone please tell me what's wrong?

Joep Demey
  • 93
  • 2
  • 8

2 Answers2

10

Try this - clear the first Timeout and then call the pageScroll function after returning to the top.

function pageScroll() {
  window.scrollBy(0, 10); // horizontal and vertical scroll increments
  scrolldelay = setTimeout('pageScroll()', 100); // scrolls every 100 milliseconds
  if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
    clearTimeout(scrolldelay);
    scrolldelay = setTimeout('PageUp()', 2000);
  }

}

function PageUp() {
  window.scrollTo(0, 0);
  setTimeout(function() {
    pageScroll()
  }, 600);
}
body {
  width: 500px;
}
<body onLoad="pageScroll()">

  <h1>Scores</h1>

  test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test
  test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br>  test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test
  test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br>  test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br>
sideroxylon
  • 4,338
  • 1
  • 22
  • 40
2

You can store out the interval so it can be cleared each time, and use setInterval instead for repeating calls.

var scrolldelay;

function pageScroll() {
    window.scrollBy(0,10); // horizontal and vertical scroll increments
    if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {       
        setTimeout('PageUp()',2000);
    }
}

function PageUp() {
    clearInterval(scrolldelay)
    window.scrollTo(0, 0);
    scrolldelay = setInterval('pageScroll()',100);
}

scrolldelay = setInterval('pageScroll()',100); // scrolls every 100 milliseconds
<h1>Scores</h1>

test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
test test test <br>
G0dsquad
  • 4,230
  • 1
  • 17
  • 22