大部分项目都会有回到顶部的功能,话不多说,下面是具体实现的思路
大致思路就是将滚动条距离顶部的距离设置成0,如果有专门的回到顶部按钮,还要获取滚动条距离顶部的距离,然后判断是否显示。
1.获取滚动条距离顶部距离的方法
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
console.log(scrollTop)
2.可以直接设置成0,但是会很生硬,没有过渡效果
document.body.scrollTop = 0
document.documentElement.scrollTop = 0
3.可以加个定时器,慢慢减少到顶部的距离,如果距离为0,则清除定时器
var timer = setInterval(function () {
let osTop = document.documentElement.scrollTop || document.body.scrollTop;
let ispeed = Math.floor(-osTop / 5);
document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed;
this.isTop = true;
if (osTop === 0) {
clearInterval(timer);
}
}, 10)
4.也可以用a标签来实现,但是也很生硬,没啥效果
<a href="#top"> 回到顶部</a></div>
还有判断回到顶部按钮是否出现,现在做的项目还没有,以后有时间再补充吧