在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
<div class="totop" v-show="toTopShow" @click="toTop()">top</div>
.totop { width: 50px; height: 50px; line-height: 50px; border-radius: 25px; background-color: white; position: fixed; bottom: 75px; right: 10px; text-align: center; }
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: { 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效果内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界! |
请发表评论