js之返回頂部,scrollTo與pageYOffset

js返回頂部的實現。

新浪微博有一個返回頂部功能，於是，就想着自己來實現，結果發現不同瀏覽器還有些不一樣。不過，終於是解決了。其實還是挺簡單的，代碼如下

 

function scrollToTop(x,y){
    if(window.all){
        //ie
        document.documentElement.scrollTop = y;
    }else{
        //實現上x可直接爲0，
         //但是在網頁大小可以左右滾動時，x就有用了
        window.scrollTo(x, y);
    }
}

所以，直接調用上面的函數就可以了，當然，你還可以判斷在網頁滾動了多少後才顯示返回頂部的按鈕。

 

/*
*由於ie和其它瀏覽器有點不同，ie下可以用
document.documentElement.scrollTop 來獲取當前的垂直方向的偏移值，
document.documentElement.scrollLeft 是水平方向偏移量
其它瀏覽器用window.pageYOffset（垂直方向）,
window.pageXOffset(水平方向)
*/

/*
* ie下的方法
*/
if(window.all && document.documentElement.scrollTop >= 500){
    //比如大於500的時候顯示返回頂部
    //具體不在這裏實現了
}else{
    //小於500時隱藏
}
/*
* 非ie下的方法
*/
if(window.pageYOffset >= 500){
    //顯示
}else{
    //隱藏
}

如有錯誤，還望指出，謝謝。

改進：

body元素的scrollTop是超出“瀏覽器窗口上邊界”的內容的高度
當html文檔頭部包含有“文檔類型聲明”時，需要用document.documentElement.scrollTop獲得正確的值，而document.body.scrollTop的值爲0
當html文檔頭部不包含有“文檔類型聲明”時，可以用document.body.scrolltop來獲得值。

 

//在某些情況下，document.documentElement.scrollTop的值爲0，這時需要修改爲
//document.body.scrollTop + document.documentElement.scrollTop
var sTop = document.body.scrollTop + document.documentElement.scrollTop;