直接復(fù)制直接粘貼
mounted() {?
? ? ? window.addEventListener('scroll', this.handleScroll); // 監(jiān)聽(tīng)滾動(dòng)的高度?
? ? },?
?methods: {?
? ?// 監(jiān)控頁(yè)面滾動(dòng)高度?
handleScroll() {?
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;?
if (scrollTop > 200) {?
? ? ? ? ? this.topShow = true; // 滾動(dòng)高度大于200時(shí)，顯示返回頂部按鈕?
? ? ? ? } else if (scrollTop < 200) {?
? ? ? ?this.topShow = false; // 滾動(dòng)高度小于200時(shí)，隱藏返回頂部按鈕 }?
? ? ? },?
? ? ? // 點(diǎn)擊按鈕，返回頂部?
? ? ? goTop() {?
? ? ? // 監(jiān)聽(tīng)滾動(dòng)條距離頂部的高度?
? ? ? ? let top = document.documentElement.scrollTop || document.body.scrollTop;?
? ? ? ? // 實(shí)現(xiàn)過(guò)度滾動(dòng)效果?
? ? ? ? const timeTop = setInterval(() => {?
? ? ? ? ? ?document.body.scrollTop = document.documentElement.scrollTop = top -= 50;?
? ? ? ? ? if (top <= 0) { clearInterval(timeTop); } }, 10);?
? ? ? ?}?
}
最后的最后附上標(biāo)簽? ? 圖片地址你要換換，不然要報(bào)錯(cuò)
<img v-show="topShow" @click="goTop" src="/static/image/About33/topfanhui.png" class="myBtn"/>
?最后的最后在送你一個(gè)class樣式：
.myBtn {
? ? /* display: none; */
? ? position: fixed;
? ? bottom: 80px;
? ? right: 30px;
? ? z-index: 99999;
? ? cursor: pointer;
? }
對(duì)了 data中別忘了 加上?topShow：false；
