本篇内容主要讲解“vue怎么实现回到顶部top效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue怎么实现回到顶部top效果”吧!
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怎么实现回到顶部top效果”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
