vue通过v-show实现回到顶部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通过v-show实现回到顶部top效果的文章就介绍到这了,更多相关vue回到顶部top效果内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网！
相关文章
Angie
2020-11-03
Valencia
2020-10-01
Claire
2021-05-21
Judy
2023-07-20
Rabia
2023-07-20
Brigitte
2023-07-20
Abbie
2023-07-20
Yvonne
2023-07-20
Rasine
2023-07-20
Tina
2023-07-20
Kande
2023-07-20
Flower
2023-07-20
Heather
2023-07-20
Tertia
2023-07-20
Fredrica
2023-07-20
Katherine
2023-07-20
Genet
2023-07-20
Orianna
2023-07-20