1. 回到頂部，使用 scrollIntoView 方法：
Element.scrollIntoView方法滾動當前元素，進入瀏覽器的可見區域
該方法可以接受一個布爾值作為參數。如果為true，表示元素的頂部與當前區域的可見部分的頂部對齊（前提是當前區域可滾動）；如果為false，表示元素的底部與當前區域的可見部分的尾部對齊（前提是當前區域可滾動）。如果沒有提供該參數，默認為true
使用該方法的原理與使用錨點的原理類似，在頁面最上方設置目標元素，當頁面滾動時，目標元素被滾動到頁面區域以外，點擊回到頂部按鈕，使目標元素重新回到原來位置，則達到預期效果。
<body style="height:2000px;">
<div id="target"></div>
<button id="test" style="position:fixed;right:0;bottom:0">回到頂部</button>
<script>
test.onclick = function(){
target.scrollIntoView();
}
</script>
</body>
2. vue 中滾動條滾到一定距離后，顯示『回到頂部』按鈕；
（1）監聽滾動事件
利用VUE寫一個在控制台打印當前的scrollTop。首先，在 mounted 鈎子中給window添加一個滾動滾動監聽事件：
mounted () { window.addEventListener('scroll', this.scrollToTop) },
然后在方法中，添加這個 scrollToTop 方法：
scrollToTop() {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
console.log(scrollTop)
}
控制台打印結果：
(2) 監聽回到頂部按鈕距瀏覽器頂部的距離，滾動的距離如果大於瀏覽器高度時，設置 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) 離開該頁面需要移除這個監聽的事件，不然會報錯;
destroyed () { window.removeEventListener('scroll', this.scrollToTop);
}