1. 回到頂部，使用 scrollIntoView 方法：

Element.scrollIntoView方法滾動(dòng)當(dāng)前元素，進(jìn)入瀏覽器的可見區(qū)域

該方法可以接受一個(gè)布爾值作為參數(shù)。如果為true，表示元素的頂部與當(dāng)前區(qū)域的可見部分的頂部對(duì)齊(前提是當(dāng)前區(qū)域可滾動(dòng))；如果為false，表示元素的底部與當(dāng)前區(qū)域的可見部分的尾部對(duì)齊(前提是當(dāng)前區(qū)域可滾動(dòng))。如果沒有提供該參數(shù)，默認(rèn)為true

使用該方法的原理與使用錨點(diǎn)的原理類似，在頁面最上方設(shè)置目標(biāo)元素，當(dāng)頁面滾動(dòng)時(shí)，目標(biāo)元素被滾動(dòng)到頁面區(qū)域以外，點(diǎn)擊回到頂部按鈕，使目標(biāo)元素重新回到原來位置，則達(dá)到預(yù)期效果。

回到頂部

target.scrollIntoView();

}

2. vue 中滾動(dòng)條滾到一定距離后，顯示『回到頂部』按鈕；

(1)監(jiān)聽滾動(dòng)事件

利用VUE寫一個(gè)在控制臺(tái)打印當(dāng)前的scrollTop。首先，在 mounted 鉤子中給window添加一個(gè)滾動(dòng)滾動(dòng)監(jiān)聽事件：

mounted () {

window.addEventListener('scroll', this.scrollToTop)

},

然后在方法中，添加這個(gè) scrollToTop 方法：

scrollToTop() {var scrollTop = window.pageYOffset || document.documentElement.scrollTop ||document.body.scrollTop;

console.log(scrollTop)

}

控制臺(tái)打印結(jié)果：

(2) 監(jiān)聽回到頂部按鈕距瀏覽器頂部的距離，滾動(dòng)的距離如果大于瀏覽器高度時(shí)，設(shè)置 toTop 為true,否則就是false;

scrollToTop(el) {

let topBtn = document.getElementById('to-top-btn');

let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

let browserHeight = window.outerHeight;

if (scrollTop > browserHeight) {

topBtn.style.display = 'block';

} else {

topBtn.style.display = 'none';

}

}

(3)?離開該頁面需要移除這個(gè)監(jiān)聽的事件，不然會(huì)報(bào)錯(cuò);

destroyed () {

window.removeEventListener('scroll', this.scrollToTop);

}

總結(jié)

以上是生活随笔為你收集整理的vue 局部回到顶部_vue中回到顶部的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。