html
复制代码
1<div class="totop" v-show="toTopShow" @click="toTop()">top</div>
css
复制代码
1
2
3
4
5
6
7
8
9
10
11.totop { width: 50px; height: 50px; line-height: 50px; border-radius: 25px; background-color: white; position: fixed; bottom: 75px; right: 10px; text-align: center; }
data
复制代码
1
2
3
4
5
6data() { return { toTopShow: false, srcoll: 0, } },
监听事件
复制代码
1
2
3
4
5
6
7
8
9watch: { srcoll() { if (this.srcoll > 400) { this.toTopShow = true; } else { this.toTopShow = false; } }, },
加载事件
复制代码
1
2
3mounted() { window.addEventListener("scroll", this.srcollShow); },
methods:
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20methods: { 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效果内容请搜索靠谱客以前的文章或继续浏览下面的相关文章希望大家以后多多支持靠谱客!
最后
以上就是野性板栗最近收集整理的关于vue通过v-show实现回到顶部top效果的全部内容,更多相关vue通过v-show实现回到顶部top效果内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复