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;