2009-08-08 208 views
18

當用戶到達某個點滾動網頁時,是否可以更改滾動條位置?例如,一旦您到達頁面的中間位置,滾動條就會自動移動回頂端。更改滾動條位置

回答

29

可以計算使用onscroll事件滾動條的當前位置的百分比,如果達到50%的滾動位置可以設置爲頁面的頂部與scrollTo功能:

window.onload = function() { 
    window.onscroll = function() { 
    var doc = document.body, 
    scrollPosition = doc.scrollTop, 
    pageSize = (doc.scrollHeight - doc.clientHeight), 
    percentageScrolled = Math.floor((scrollPosition/pageSize) * 100); 

    if (percentageScrolled >= 50){ // if the percentage is >= 50, scroll to top 
     window.scrollTo(0,0); 
    } 
    }; 
}; 

您可以查看我的示例here

+1

@CMS:優秀的答案! – Josh 2009-08-08 14:47:18

+0

window.scrollTo(0,0); 不適合我在chomre – SuperUberDuper 2016-05-24 09:54:13

9

是的,我已經看過幾次了。下面是一些JS代碼:

window.scrollBy(0,50)

50要通過滾動的像素數量。

2

(window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop)應該在幾乎任何瀏覽器中爲您提供當前滾動位置。

4

您需要關注的三個滾動功能是window.scroll(x,y),window.scrollBy(dx,dy)window.scrollTo(x,y)

正如David所說,您需要滾動位置才能知道您的位置,並使用window.onscroll事件觸發此計算。

+1

這些可在所有瀏覽器上使用,或者需要某些功能檢測嗎? – 2011-10-04 00:32:54