admin管理员组

文章数量:1026989

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 .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>

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./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?

  • javascript
  • html
  • scroll
Share Improve this question asked Mar 3, 2017 at 10:43 Joep DemeyJoep Demey 1132 silver badges10 bronze badges 1
  • Maybe this answer will help you stackoverflow./a/4289567/10267249 – Ali Khoshgoftar Commented Mar 3, 2021 at 8:01
Add a ment  | 

2 Answers 2

Reset to default 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>

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>

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 .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>

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./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?

  • javascript
  • html
  • scroll
Share Improve this question asked Mar 3, 2017 at 10:43 Joep DemeyJoep Demey 1132 silver badges10 bronze badges 1
  • Maybe this answer will help you stackoverflow./a/4289567/10267249 – Ali Khoshgoftar Commented Mar 3, 2021 at 8:01
Add a ment  | 

2 Answers 2

Reset to default 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>

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>

本文标签：

版权声明：本文标题：html - Javascript to keep a webpage scrolling, scroll down slowly, wait, back to top - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1740925387a1798110.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。