Javascript保持网页滚动，缓慢向下滚动，等待，返回顶部

Question

Javascript保持网页滚动，缓慢向下滚动，等待，返回顶部

我需要一个网页上的 javascript，我想在本地测验中显示。该页面显示了得分表，但有 60 个团队，我无法一次显示它们。所以我想在缓慢向下滚动的页面中添加一个javascript，当页面在底部时，它应该等待2秒然后跳回页面顶部并再次开始向下滚动。

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

Run Code Online (Sandbox Code Playgroud)

滚动速度会改变，这太快了，但只是为了测试。该脚本似乎完成了这项工作，但是当跳转到页面顶部时，在再次向下滚动之前会有一些“hickups”。谁能告诉我出了什么问题？

Answer 1

sid*_*lon 5

试试这个 - 清除第一个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);
}

Run Code Online (Sandbox Code Playgroud)

body {
  width: 500px;
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，3 月前
查看次数：	3374 次
最近记录：	9 年，3 月前