vue通过v-show怎么实现回到顶部top效果
导读：本文共829字符，通常情况下阅读需要3分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要： html<divclass="totop"v-show="toTopShow"@click="toTop()">top</div>css.totop{width:50px;height:50px;line-height:50px;border-radius:25px;b... ...
音频解说
目录
(为您整理了一些要点),点击可以直达。
html
<divclass="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);},} </div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">本文：
vue通过v-show怎么实现回到顶部top效果的详细内容，希望对您有所帮助，信息来源于网络。