js 返回顶部按钮

要求：当鼠标从顶部滚动后，显示返回顶部按钮，点击按钮，页面平滑滚动到顶部，按钮隐藏。

1.css

#scrollTop{
            position:fixed;
            bottom: 20px;
            right: 20px;
            height: 0px;
            width:  45px;
            line-height: 45px;
            text-align: center;
            background-color: rgba(0,0,0,.7);
            color: #fff;
            font-weight: 600;
            border-radius: 45%;
            font-size: 13px;
            transition: .5s all;
}

2.js

<script type="text/javascript">
    var scrolltop = document.getElementById("scrollTop");
    scrolltop.onclick = function(){
        // alert("111");
        // document.scrollingElement.scrollTop = 0;
        //  window.scrollTo(0,0); 
            
        window.scrollTo({ top: 0, behavior: "smooth" });
    }
         
    window.onscroll = function(){
        var scrollTop1 = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
        if (scrollTop1> 0) {
            // scrolltop.style.width = 45 + 'px';
            scrolltop.style.height = 45 + 'px';
        } else {
            // scrolltop.style.width = 0 + 'px';
            scrolltop.style.height = 0 + 'px';
        }
     }      
</script>

解释：

1.position : fixed; 以浏览器窗口绝对定位

2. 返回顶部方法

① document.scrollingElement.scrollTop = 0 ;   //垂直滚动到顶部

② window.scrollTop(0,0)  //垂直滚动到顶部

③  window.scrollTop(options);

top: 相当于y轴坐标；

left: 相当于x轴坐标；

behavior:类型string，表示滚动行为，支持smooth(平滑滚动),instant(瞬间滚动), 默认值是auto，等同于instant

window.scrollTo({ 
    top: 1000, 
    behavior: "smooth" 
});

3. 当滚动条滚动的距离大于零时，设置按钮高度，否则高度为零（不显示）

获取scrollTop：

①各浏览器下 scrollTop的差异
IE6/7/8：
对于没有doctype声明的页面里可以使用 document.body.scrollTop 来获取 scrollTop高度 ；
对于有doctype声明的页面则可以使用 document.documentElement.scrollTop；
Safari:
safari 比较特别，有自己获取scrollTop的函数 ： window.pageYOffset ；
Firefox:
火狐等等相对标准些的浏览器就省心多了，直接用 document.documentElement.scrollTop ；
②完美获取
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

通过这句赋值就能在任何情况下获得scrollTop 值。 

 window.pageYOffset (Safari) 被放置在 || 的中间位置。
因为当 数字0 与 undefine 进行 或运算时，系统默认返回最后一个值。即或运算中 0 || undefine ;返回的是underfine。
当页面滚动条刚好在最顶端，即scrollTop值为 0 时。 IE 下 window.pageYOffset (Safari) 返回为 undefine ，此时将window.pageYOffset (Safari) 放在或运算最后面时， var scrollTop= 0 || 0 || undefine =underfine ,这样用在接下去的运算就会报错咯。
而其他浏览器 无论 scrollTop 赋值或运算顺序如何都不会返回 undefine. 可以安全使用..
所以 window.pageYOffset 要放中间 如下：
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;