vue底部跳转_Vue实现回到顶部和底部动画效果

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

代码：

<

>

export default{

props:{

step:{ //此数据是控制动画快慢的

type:Number,

default:50

}

},

data(){

return {

isActive:false,

}

},

methods:{

toTop(i){

//参数i表示间隔的幅度大小，以此来控制速度

document.documentElement.scrollTop-=i;

if (document.documentElement.scrollTop>0) {

var c=setTimeout(()=>this.toTop(i),16);

}else {

clearTimeout(c);

}

},

toBottom(i){

var clientHeight=document.documentElement.clientHeight||document