vue通过v-show实现回到顶部top效果
时间：2023-01-15 11:42:55 | 栏目：vue | 点击：次
html
<div class="totop" v-show="toTopShow" @click="toTop()">top</div>
css
.totop {
width: 50px;
height: 50px;
line-height: 50px;
border-radius: 25px;
background-color: white;
position: fixed;
bottom: 75px;
right: 10px;
text-align: center;
}
data
data() {
return {
toTopShow: false,
srcoll: 0,
}
},
监听事件
watch: {
srcoll() {
if (this.srcoll > 400) {
this.toTopShow = true;
} else {
this.toTopShow = false;
}
},
},
加载事件
mounted() {
window.addEventListener("scroll", this.srcollShow);
},
methods：
methods: {
srcollShow() {
this.srcoll =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop;
},
toTop() {
this.toTopSpeed = setInterval(() => {
document.documentElement.scrollTop =
document.documentElement.scrollTop - 20;
//通过改变数字实现动画延迟滚动
if (this.srcoll < 10) {
clearInterval(this.toTopSpeed);
}
}, 1);
},
}
以上操作实现通过监听滚动条>400后，top按钮出现，并且点击top按钮，慢慢回到顶部，低于400隐藏,img以此类推