回到顶部实现过程注解:
1.获取当前页面距离顶部的距离
2.计算出每次向上移动的距离,用负的滚动距离除以5,因为滚动的距离是一个正数,想向上移动就是一个减法
3.用当前距离加上计算出的距离,然后赋值给当前距离,就可以达到向上移动的效果
4.最后在移动到顶部的时候,清除定时器
Vue
<div class="top" v-show="showBtn" @click="backTop">back</div>
Css
.top {
height: 55px;
width: 55px;
position: fixed;
right: 4%;
bottom: 11%;
text-align: center;
line-height: 35px;
font-size: 20px;
background-color: #fff;
border-radius: 50%;
box-shadow: 0px 1px 3px 1px #888888;
z-index: 999;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
box-shadow: 5px 5px 10px rgba(41, 26, 204, 0.12);
}
data
showBtn: false,
mounted
mounted() {
window.addEventListener("scroll", this.showbtn, true)
},
methods
// 回到顶部
showbtn() {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
if (scrollTop > 1000) {
this.showBtn = true;
} else {
this.showBtn = false;
}
},
backTop() {
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) }
}, 80);
},