IE 、Firefox、chrome及Safari下scrollTop的差异

刚在写document.body.scrollTop=0 实现返回页面顶部时，发现火狐及IE下无效，但在chrome及Safari下有效，后来测试发现滚动页面一定距离后：
1、在IE及Firefox中document.body.scrollTop的值恒为零，但是document.documentElement.scrollTop及window.pageYOffset（该参数返回文档在垂直方向已滚动的像素值）的值为滚动的距离；
2、在chrome及Safari（webkit内核）下document.documentElement.scrollTop的值恒为零，但是document.body.scrollTop及window.pageYOffset的值为滚动的距离

一、IE11的情况

IE.png

二、Firefox 52.0.2的情况

Firefox.png

三、chrome 57.0.2987.133 的情况

chrome.png

四、Safari的情况

用的手机Safari浏览器测试的。。。没钱买苹果笔记本， 略...... 哈哈。。。（Safari内核也为webkit，同chrome一样）

五、总结

因此构建返回顶部事件时，为了兼容，可以这样写：

    goToTop.addEventListener("click", function () {
        if (document.documentElement.scrollTop){
            document.documentElement.scrollTop=0;
        }
        if (document.body.scrollTop){
            document.body.scrollTop=0 ;
        }
//        $(window).scrollTop(0); 使用了jQuery 或zepto 等库 可以这样写
    })

或者更简单的方法

    goToTop.addEventListener("click", function () {
                window.scrollTo(0,0); //前面一个0 表示要在窗口文档显示区左上角显示的文档的 x 坐标，后面0表示y坐标
})

值得注意的是 我们并没有 因为window.pageYOffset在这三个浏览器中表现正常，就使用window.pageYOffset=0 这样的语句，这是因为这样只是简单的赋值而已，其不会去操作滚动条。

**本文版权归本人即简书笔名：该账户已被查封 所有，如需转载请注明出处。谢谢！ *