logo标签列表

JavaScript让网页滚动，缓慢向下滚动，等待，回到顶部。

javascripthtmlscroll
6

我需要在一个网页上添加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>

滚动速度将会被改变，这个速度对于测试来说太快了。脚本似乎能够完成任务，但是当跳转到页面顶部时，会出现一些“卡顿”问题，然后再次向下滚动。请问有人能告诉我出了什么问题吗？
也许这个答案能帮到你 https://dev59.com/IG855IYBdhLWcg3wiU31#4289567 - Ali Khoshgoftar
2个回答
10
尝试这个方法 - 先清除第一个 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

您可以将间隔存储起来，以便每次都可以清除它，并使用 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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接