vue.js实现回到顶部动画效果

2023-08-18 08:02:04 282

*{ margin:0px; padding:0px; border:0; } html,body{ width:100%; height:100%; position:relative; background:#F2F2F2; overflow-x:hidden; overflow-y:auto; z-index:1; } [v-cloak]{ display:none; } .back-to-top{ position:fixed; bottom:5px; right:20px; z-index:100; border-radius:5px; box-shadow:0px0px2px#222; padding:8px10px; cursor:pointer; } .back-to-top:hover{ background:#5AC4D1; } .back-to-top:hoverspan{ color:white; } .back-to-topspan{ display:block; } .page{ width:100%; height:400px; line-height:400px; text-align:center; } .page:nth-child(odd){ background:white; }

varbackTopVue=newVue({ el:"#back-to-top", data:{ //是否显示回到顶部 backTopShow:false, //是否允许操作返回顶部 backTopAllow:true, //返回顶部所需时间 backSeconds:100, //往下滑动多少显示返回顶部（单位：px） showPx:200 }, mounted:function(){ window.addEventListener("scroll",this.backTopShowOperate,true); }, methods:{ backTopShowOperate:function(){ if(!this.backTopAllow)return; if(document.body.scrollTop>this.showPx){ this.backTopShow=true; }else{ this.backTopShow=false; } }, backToTop:function(){ if(!this.backTopAllow)return; this.backToTopShow=false; this.backTopAllow=false; varstep=document.body.scrollTop/this.backSeconds; varbackTopInterval=setInterval(function(){ if(document.body.scrollTop>0){ document.body.scrollTop-=step; }else{ backTopVue.backTopAllow=true; clearInterval(backTopInterval); } },1); } } });

vue.js实现回到顶部动画效果

热门推荐

随机推荐