Vue实现回到顶部和底部动画效果

本文实例为大家分享了某视频剪辑软件实现回到顶部和底部动画效果的具体代码，供大家参考，具体内容如下

代码：

模板div class=' scroll ' : class=' { show : is active } ' div id=' ToToP ' @ click=' ToToP(step)'/div id=' ToBottom ' @ click=' ToBottom(step)'/div/div/模板脚本导出默认值{道具s : {步骤： }//此数据是控制动画快慢的type:Number，default:50 } }，data(){ return { isaactive 3360 false，} }，methods:{ toTop(i){ //参数我表示间隔的幅度大小，以此来控制速度文件。文档元素。滚动顶部-=I；if(文档。文档元素。滚动顶部0){ var c=setTimeout(()=this。托特普(一)，16岁；} else { clear time out(c)；} }，到底部(I){ var客户端高度=文档。文档元素。客户端高度| |文档。尸体。客户身高；var滚动高度=文档。文档元素。滚动高度；var高度=滚动高度-客户端高度；//超出窗口上界的值就是底部的scrolTop的值文件。文档元素。滚动顶部=I；if(文档。文档元素。滚动到th){ var c=setTimeout(()=this。到底部(1)，16)；} else { clear time out(c)；} } }，创建了(){ var VM=thiswindow .nscrll=function(){ if(document。文档元素。滚动至前60名){虚拟机。isaactive=true} else { VM . isaactive=false } } } }/script style作用域。滚动{位置：固定；右： 10pxbottom: 60px宽度： 45px高度： 90px光标：指针；显示器：无；} .scrolldiv { width: 45px高度： 45px变压器： 旋转(90度);线高： 45px文本对齐：中心；font-size : 35px字体系列： '黑体；背景-color: rgba(0，0，0，2);color: # fff}。scroldiv :悬停{底色： rgba(0，0，0，5);} .显示{显示：块；}/样式以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。