溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例為大家分享了Vue實現回到頂部和底部動畫效果的具體代碼，供大家參考，具體內容如下
代碼：
<template>
<div>
<div class="scroll" :class="{show:isActive}">
<div id="toTop" @click="toTop(step)"><</div>
<div id="toBottom" @click="toBottom(step)">></div>
</div>
</div>
</template>
<script>
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.body.clientHeight;
var scrollHeight=document.documentElement.scrollHeight;
var height=scrollHeight-clientHeight; //超出窗口上界的值就是底部的scrolTop的值
document.documentElement.scrollTop+=i;
if (document.documentElement.scrollTop<height) {
var c=setTimeout(()=>this.toBottom(i),16);
}else {
clearTimeout(c);
}
}
},
created(){
var vm=this;
window.οnscrοll=function(){
if (document.documentElement.scrollTop>60) {
vm.isActive=true;
}else {
vm.isActive=false;
}
}
}
}
</script>
<style scoped>
.scroll{
position: fixed;
right: 10px;
bottom: 60px;
width: 45px;
height: 90px;
cursor: pointer;
display: none;
}
.scroll>div{
width: 45px;
height: 45px;
transform: rotate(90deg);
line-height: 45px;
text-align: center;
font-size: 35px;
font-family: "黑體";
background-color: rgba(0,0,0,.2);
color: #fff;
}
.scroll>div:hover{
background-color: rgba(0,0,0,.5);
}
.show{
display: block;
}
</style>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
