JavaScript保持網頁滾動，慢慢向下滾動，等等，返回頂部

我需要在我想顯示在本地測驗的網頁上使用javascript。該頁面顯示了分數表，但有60個團隊，我無法一次顯示全部。所以我想爲緩慢向下滾動的頁面添加一個javascript，當頁面位於底部時，它應該等待2秒鐘，然後跳回頁面頂部並開始向下滾動。JavaScript保持網頁滾動，慢慢向下滾動，等等，返回頂部

在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() { 
 
    \t window.scrollBy(0,10); // horizontal and vertical scroll increments 
 
    \t scrolldelay = setTimeout('pageScroll()',100); // scrolls every 100 milliseconds 
 
      if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) { 
 
     \t \t scrolldelay = setTimeout('PageUp()',2000); 
 
    \t \t } 
 

 
} 
 

 
function PageUp() { 
 
\t window.scrollTo(0, 0); 
 
} 
 

 
</script> 
 

 
</body> 
 
</html>

滾動速度將被改變，這是太快了，但只是用於測試。腳本似乎完成了這項工作，但當跳到頁面的頂部時，在再次滾動之前會出現一些「混帳」。任何人都可以告訴我什麼是錯的？

來源

2017-03-03 Joep Demey

嘗試此操作 - 清除第一個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>

來源

2017-03-03 10:55:55 sideroxylon

謝謝，這工作正常 –

您可以將出間隔，因此每次都可以被清除，並用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>

來源

2017-03-03 10:58:24 G0dsquad

JavaScript保持網頁滾動，慢慢向下滾動，等等，返回頂部

回答

相關問題