如何实现返回顶部的效果

要想解决这个问题须要只要几个知识点

1. scrollHeight:元素内容的总高度
2. scrollWidth:元素内容的总宽度
3. scrollLeft:由于滚动被隐藏在内容区域上面的高度
4. scrollTop：由于滚动被隐藏在内容区域左边的高度

获取滚动高度的兼容写法

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

获取浏览器视口的大小的兼容写法

1. var clientHeight = document.documentElement.clientHeight || document.body.clientHeight

若是滚动高度大于一屏的高度就出现回到顶部

if(scrollHeight > clientHeight){
    //显示回到顶部按钮
}else{
    //隐藏回到顶部按钮
}
复制代码

点击回到顶部进行的操做