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

时间：2017-03-03 10:43:47

标签： javascript html scroll

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

在https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_scrollto我使用了这个脚本：

＆＃13;
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

滚动速度会改变，这个速度太快但只是用于测试。该脚本似乎可以完成这项工作，但是当跳到页面顶部时，会有一些＆＃34; hickups＆＃34;再次向下滚动之前。谁能告诉我什么错了？

2 个答案:

答案 0 :(得分：4)

尝试此操作 - 清除第一个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>

答案 1 :(得分：0)

您可以存储时间间隔，以便每次都可以清除，并使用setInterval代替重复来电。

＆＃13;
＆＃13; 
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
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题