Javascript保持网页滚动，慢慢向下滚动，等待，回到顶部
[英]Javascript to keep a webpage scrolling, scroll down slowly, wait, back to top
问题描述
I need a javascript on a webpage that I want to display on a local quiz. 
我需要在我希望在本地测验中显示的网页上使用javascript。 The page shows the score table, but with 60 teams, I cannot show them all at once. 该页面显示了分数表，但有60个团队，我无法一次显示所有这些。 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. 所以我想在缓慢向下滚动的页面添加一个javascript，当页面在底部时，它应该等待2秒然后跳回到页面顶部并再次开始向下滚动。
At https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_scrollto I used this script: 在https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_scrollto我使用了这个脚本：
<!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. 该脚本似乎可以完成这项工作，但是当跳到页面顶部时，在再次向下滚动之前会有一些“hickups”。 Can anyone please tell me what's wrong? 谁能告诉我有什么问题？
2 个解决方案
解决方案1
4 2017-03-03 10:55:55
Try this - clear the first Timeout and then call the pageScroll function after returning to the top. 试试这个 - 清除第一个Timeout ，然后在返回顶部后调用pageScroll函数。
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>
解决方案2
0 2017-03-03 10:58:24
You can store out the interval so it can be cleared each time, and use setInterval instead for repeating calls. 您可以存储间隔，以便每次都可以清除，并使用setInterval代替重复调用。
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.