标签：else 回到顶部 ack bottom col color 问题 div cli
JS === 实现点击回到顶部
样式：
body{height:10000px} // 产生滚动条
.go-2-top{width:50px; height:50px;background:red;cursor:pointer;position:fixed;right:20px;bottom:20px;display:none } // 模拟点击div的时候回到顶部 最初隐藏，滚动一定距离显示
结构：
<body>
<div class = "go-2-top" id = "back-top"></div>
</body>
JS:
<script>
var backTop = document.getElementById("back-top") //获取到div 对象
// onscroll 事件
window.onscroll = function (){
var scrollTop = document.documentElement.scrollTop ? // 三目运算 = 兼容问题
document.documentElement.scrollTop :
document.body.scrollTop;
if(scrollTop > 800){ //当滚动条滚动的距离大于 800 的时候，才会显示 回到顶部的div
backTop.style.display = "block"
}else{
backTop.style.display = "block"
}
}
// 为 div 添加点击事件
var id; // ===== 要注意 id声明的位置
backTop.onclick = function (){
id = SetInterval(function (){ // 使用间隔函数的理由===》当点击回到顶部的时候，不是一下子滚动距离就变成0 ，而是形成一个过渡的过程，每隔16毫秒，current-100
var current = document.documentElement.scrollTop ? // 取得当前滚动的距离
document.documentElement.scrollTop :
document.body.scrollTop;
if(current === 0){
clearInterval(id); // 当滚动距离为0 的时候，要清除这个间隔函数
}
document.documentElement.scrollTop = current - 100 // 形成一个慢慢过渡到0 的过程
document.body.scrollTop = current - 100 // 写两个是为了兼容
} , 16)
}
// 在回到顶部的过程时候，鼠标滚轮动的时候，滚动会暂停
// 添加一个鼠标滚轮事件
window.onmousewheel = function (){
clearInterval(id); // ======= 这个时候会涉及到上面标注的要注意id的位置，最开始的时候 把他写在了函数体里面，到这里的时候就获取不到了。
}
学习要点总结 ：
1. 事件：
onscroll 滚动事件
onmousewheel 鼠标滚轮事件
2. 间隔函数
setInterval() == 两个参数，一是执行的函数 二是间隔的时间
清除间隔函数
clearInterval(标识符)
3.scrollTop 兼容问题
document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
4.作用域
标签：else 回到顶部 ack bottom col color 问题 div cli
原文地址：https://www.cnblogs.com/rabbit-lin0903/p/11141269.html
