导航的吸顶效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<title></title>
</head>
<body>
<div>
<button id="btn">回到顶部</button>
</div>
</body>
<script type="text/javascript">
// 封装获取页面高度的函数
function getScroll() {
return {
top: window.pageYoffset||
document.documentElement.scrollTop||document.body.scrollTop,
left: window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft
}
}
// 获取按钮
var btn = document.getElementById("btn");
// 定义定时器
var timer = null;
// 定义布尔值，判断是否到达顶部
var isTop = true;
window.onload = function(){
// 注册页面滚动事件
window.onscroll = function(){
// 获取当前页面滚动值
var scrollTop = getScroll().top;
// 页面滚动值大于200显示按钮，否则隐藏按钮
btn.style.display = scrollTop >= 200?"block":"none";
// 定时器滚动时,如果手动滚动,清理定时器
if(!isTop){
clearInterval(timer);
}
// isTop = false,停住在当前页面
isTop = false;
}
}
// 注册按钮点击事件
btn.onclick = function(){
// 设置定时器
timer = setInterval(function(){
// 获取当前页面滚动值 假设现在为200
var scrollTop = getScroll().top;
// 设置速度差 speed = -200 / 6;
var speed = Math.floor( -scrollTop / 6);
// 页面滚动值 = 200+(-200/6);
document.body.scrollTop=document.documentElement.scrollTop=scrollTop+speed;
// 阻止滚动事件清理定时器
isTop = true;
// 页面滚动值 = 0 清理定时器
if(scrollTop == 0){
clearInterval(timer);
}
},20);
}
</script>
</html>
原文章连接：https://blog.csdn.net/weixin_43287587/article/details/90111067
