vue通過v-show實現(xiàn)回到頂部top效果
更新時間：2021年12月15日 09:24:35 作者：風(fēng)尚云網(wǎng)
這篇文章主要介紹了vue通過v-show實現(xiàn)回到頂部top效果,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
??
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以此類推
到此這篇關(guān)于vue通過v-show實現(xiàn)回到頂部top效果的文章就介紹到這了,更多相關(guān)vue回到頂部top效果內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue?收集表單數(shù)據(jù)方法詳情，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-05-05
這篇文章主要為大家介紹了vue多頁面項目實現(xiàn)版本快照功能示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
vue.js給動態(tài)綁定的radio列表做批量編輯的方法
下面小編就為大家分享一篇vue.js給動態(tài)綁定的radio列表做批量編輯的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了vue如何通過src引用assets中的圖片，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
本篇文章主要介紹了vue-cli如何引入bootstrap工具的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
代碼添加了一個vDistpickerHandle的事件處理函數(shù)對地區(qū)選擇器中的數(shù)據(jù)進(jìn)行處理,將數(shù)據(jù)存儲到form對象的相應(yīng)屬性中,方便數(shù)據(jù)提交,這篇文章主要介紹了v-distpicker地區(qū)選擇器組件使用,需要的朋友可以參考下2024-02-02
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)伸縮菜單功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
使用this.$nextTick()獲取不到數(shù)據(jù)更新后的this.$refs.xxx.及場景分析
今天遇到了這樣一個場景，在數(shù)據(jù)更新之后，使用this.$nextTick(()=>{console.log(this.$refs.xxx)}) 獲取不到改dom，但是用setTimeout能夠獲取到，在此記錄一下，感興趣的朋友跟隨小編一起看看吧2023-02-02
這篇文章主要介紹了vue2如何安裝引入Ant Design問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vue.js獲取數(shù)據(jù)庫數(shù)據(jù)實例代碼
本篇文章主要介紹了vue.js獲取數(shù)據(jù)庫數(shù)據(jù)實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05