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以此类推
到此这篇关于vue通过v-show实现回到顶部top效果的文章就介绍到这了,更多相关vue回到顶部top效果内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
