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

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

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

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

回到頂部

target.scrollIntoView();

}

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

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

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

mounted () {

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

},

然后在方法中，添加這個 scrollToTop 方法：

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

console.log(scrollTop)

}

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

(2) 監(jiān)聽回到頂部按鈕距瀏覽器頂部的距離，滾動的距離如果大于瀏覽器高度時，設(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)?離開該頁面需要移除這個監(jiān)聽的事件，不然會報錯;

destroyed () {

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

}

總結(jié)

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

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