前言
笔者原来是写vue.js,最近一个项目是用原生方法来写JS代码。今天用原生 JS代码写了一个回到顶部,所以将其记录下来,方便给其他读者提供参考。
具体代码如下
1.HTML代码
// 可将TOP换成图片
<a class="to-top" href="javascript:;" id="toTop">TOP</a>
2.CSS
.to-top {
position: fixed;
right: 0;
bottom: 20px;
width: 40px;
height: 40px;
z-index: 999;
}
3.JS代码
<script>
window.onload = function() {
// 获取回到顶部按钮的ID
var obtn = document.getElementById('toTop');
// 获取可视区域的高度
var clientHeight = document.documentElement.clientHeight;
// 定义一个定时器
var timer = null;
// 定义一个布尔值,用于判断是否到达顶部
var isTop = true;
// 滚动条滚动事件
window.onscroll = function() {
// 获取滚动条的滚动高度
var osTop = document.documentElement.scrollTop || document.body.scrollTop;
// 如果滚动高度大于可视区域高度,则显示回到顶部按钮
if(osTop >= clientHeight) {
obtn.style.display = 'block';
}else{
// 否则隐藏
obtn.style.display = 'none';
}
// 主要用于判断当 点击回到顶部按钮后 滚动条在回滚过程中,若手动滚动滚动条,则清除定时器
if(!isTop) {
clearInterval(timer);
}
isTop = false;
}
// 回到顶部按钮点击事件
obtn.onclick = function() {
// 设置一个定时器
timer = setInterval(function() {
// 获取滚动条的滚动高度
var osTop = document.documentElement.scrollTop || document.body.scrollTop;
// 用于设置速度差,产生缓动的效果
var speed = Math.floor(-osTop / 6);
document.documentElement.scrollTop = document.body.scrollTop = osTop + speed;
// 用于阻止滚动事件清除定时器
isTop = true;
if(osTop == 0) {
clearInterval(timer);
}
},30);
}
}
</script>
总结
本文设置了速度差,使点击返回顶部时产生缓动的效果,这样相较于点击按钮后直接返回顶部的操作没有这么粗鲁。