JS实现回到顶部按钮

CSS部分忽略。

// 1. 当我们的页面高度隐藏了800px的时候，让回到顶部按钮显示出来; 

 // 2. 当我们点击回到顶部按钮的时候，页面的隐藏高度设置为0; 

知识点：

用：document.documentElement.scrollTop;    获取当前页面的滚动条纵坐标位置，

而不是：document.body.scrollTop;    

documentElement 对应的是 html 标签，而 body 对应的是 body 标签。    

在标准w3c下，document.body.scrollTop恒为0，需要用document.documentElement.scrollTop来代替    

 ie5.5之后已经不支持document.body.scrollX对象了。

 var scrollTop = document.body.scrollTop || document.documentElement.scrollTop 

window.onscroll = btnToggle； 当页面滚动时，则触发事件。

<script>
// 需求1实现 : 
        // - 1. 当页面卷动的时候我们去判断页面隐藏高度;  绑定 scroll 事件; 
        // - 2. 判定页面卷动高度; 获取 scrollTop
    function btnToggle(){
        // ie5.5之后已经不支持document.body.scrollX对象了
        //页面被卷动的高度||获取滚动条位置坐标
        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        //判断scrollTop 是否符合我们的参数规则； 
        if(scrollTop >= 800){
            goback.style.display = "block";
        }else{
            goback.style.display = "none";
        }
    }
    //页面被滚动时触发
    window.onscroll = btnToggle;

        // 需求2实现 : 
        // 元素点击时触发事件，我们给scrollTop 赋值0 ， 实现回到顶部功能; 

    function handlerGoback(){
             // document.body.scrollTop = 0;
            // document.documentElement.scrollTop = 0; 
            // 扩展 : 操作滚动条的API还有 scrollTo();
            // window.scrollTo(0,0);
    window.scrollTo(
        {
            top: 0,
            behavior:"smooth"
        }        
)
}
goback.onclick = handlerGoback;

</script>