您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“vue怎么實現(xiàn)回到頂部top效果”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強。下面就讓小編來帶大家學習“vue怎么實現(xiàn)回到頂部top效果”吧!
html
<div class="totop" v-show="toTopShow" @click="toTop()">top</div>
css
.totop {
width: 50px;
height: 50px;
line-height: 50px;
border-radius: 25px;
background-color: white;
position: fixed;
bottom: 75px;
right: 10px;
text-align: center;
}
data
data() {
return {
toTopShow: false,
srcoll: 0,
}
},
監(jiān)聽事件
watch: {
srcoll() {
if (this.srcoll > 400) {
this.toTopShow = true;
} else {
this.toTopShow = false;
}
},
},
加載事件
mounted() {
window.addEventListener("scroll", this.srcollShow);
},
methods:
methods: {
srcollShow() {
this.srcoll =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop;
},
toTop() {
this.toTopSpeed = setInterval(() => {
document.documentElement.scrollTop =
document.documentElement.scrollTop - 20;
//通過改變數(shù)字實現(xiàn)動畫延遲滾動
if (this.srcoll < 10) {
clearInterval(this.toTopSpeed);
}
}, 1);
},
}
以上操作實現(xiàn)通過監(jiān)聽滾動條>400后,top按鈕出現(xiàn),并且點擊top按鈕,慢慢回到頂部,低于400隱藏,img以此類推
到此,相信大家對“vue怎么實現(xiàn)回到頂部top效果”有了更深的了解,不妨來實際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢,關(guān)注我們,繼續(xù)學習!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。