JS === 实现回到顶部
Posted rabbit-lin0903
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS === 实现回到顶部相关的知识，希望对你有一定的参考价值。
JS === 实现点击回到顶部
样式：
bodyheight:10000px // 产生滚动条
.go-2-topwidth: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.作用域
以上是关于JS === 实现回到顶部的主要内容，如果未能解决你的问题，请参考以下文章