天天看點

scroll、scrollBy和 scrollTo三種方法定位滾動條位置

在預設情況下,頁面加載完後預設滾動在最頂端,有些時候我們需要在頁面打開後,定位滾動條的位置,比如,橫向和縱向滾動條居中,實作頁面滾動的方法有三種:scroll、scrollBy和 scrollTo,三個方法都帶兩個參數:x(X軸上的偏移量)和y(Y軸上的偏移量)。是以我們隻需修改x,y的偏移量來設定滾動條的位置。另外,頁面的滾動高度必須在網頁加載完成後才能擷取到,是以觸發事件用onload。

方法一:用scroll方法實作滾動條位于最底端。

<body onload="scroll(0,document.body.scrollHeight) ">       

方法二:用scrollBy方法實作滾動條位于最右端。

<body onload="scrollBy(document.body.scrollWidth,0) ">      

方法三:用scrollTo方法實作水準滾動條和縱向滾動條均居中。

<body onload="scrollTo(document.body.scrollWidth/2,document.body.scrollHeight/2)">      

雖然使用scroll、scrollBy和scrollTo方法的效果一樣,但是彼此之間還是有一些差別的。 經測試如果使用某一确定的位置參數時,不需要帶機關,例據頂端300像素:

<body onload="scroll(0,300) ">