本文实例为大家分享了Vue实现回到顶部和底部动画效果的具体代码,供大家参考,具体内容如下
代码:
& lt; template>
& lt; div>
& lt; div类=肮龆?类={显示:isActive}”比;
& lt; div id=皌oTop @click”=皌oTop(步骤)“祝辞,lt; & lt;/div>
& lt; div id=皌oBottom @click”=皌oBottom(步骤)“祝辞,gt; & lt;/div>
& lt;/div>
& lt;/div>
& lt;/template>
& lt; script>
出口默认{
道具:{
一步:{//此数据是控制动画快慢的
类型:数字,
默认值:50
}
},
数据(){
返回{
isActive:假的,
}
},
方法:{
toTop (i) {//参数我表示间隔的幅度大小,以此来控制速度
document.documentElement.scrollTop -=我;
如果(document.documentElement.scrollTop> 0) {
var c=setTimeout()=祝辞this.toTop(我),16);
其他}{
clearTimeout (c);
}
},
toBottom (i) {
var clientHeight=document.documentElement.clientHeight | | document.body.clientHeight;
var scrollHeight=document.documentElement.scrollHeight;
var高度=scrollHeight-clientHeight;//超出窗口上界的值就是底部的scrolTop的值
document.documentElement.scrollTop +=我;
如果(document.documentElement.scrollTop<高度){
var c=setTimeout()=祝辞this.toBottom(我),16);
其他}{
clearTimeout (c);
}
}
},
创建(){
var vm=;
window.οnscrοll=function () {
如果(document.documentElement.scrollTop> 60) {
vm.isActive=true;
其他}{
vm.isActive=false;
}
}
}
}
& lt;/script>
& lt; scoped>风格;
.scroll {
位置:固定;
右:10 px;
底部:60 px;
宽度:45 px;
身高:90 px;
光标:指针;
显示:没有;
}
.scroll> div {
宽度:45 px;
高度:45 px;
变换:旋转(90度);
行高:45 px;
text-align:中心;
字体大小:35 px;
字体类型:“黑体”;
background - color: rgba (0, 0, 0, 0。2);
颜色:# fff;
}
.scroll> div:{徘徊
background - color: rgba (0, 0, 0, 0。5);
}
,告诉{
显示:块;
}
& lt;/style>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
