開發首頁出現滾動條回到頂部的需求，也不能直接回到，要緩慢回滾。
舊項目使用的是JQuery的 $("html,body").animate({scrollTop: 0}, 500); //動畫化滾動到頂部。var scrolltop=$(this).scrollTop();//位置
新項目使用Vue開發，首先遇到的問題是網上查詢的所有回到頂部方法均無效。找朋友遠程幫忙檢查了一下，原來是html，body，和element-UI 的main容器 .el-main設置了高度爲100vh；這導致了最外層容器高度均爲屏幕高度，此時子元素高度超出後，會在父級容器中滾動，實際上並不是整個頁面在瀏覽器中滾動，導致了我在網上查找的回到頂部方法均無效（有一個例外）。在朋友的建議下改爲min-height：100vh; height:auto;此時發現頁面中的滾動條的確和原來不同了。之前無效的方法，也開始奏效。
下面總結一下，網上查詢的滾動條回到頂部方法：
1：window.scrollTo(0,0); //瀏覽器滾動
2：document.documentElement.scrollTop; //瀏覽器滾動
3: container.scrollIntoView(); //容器內滾動的例外生效方法；container爲容器id。
即使我原來的容器內滾動可以用方法3來實現，但是後面的滾動條位置監控（滾動條在頂部是回到頂部按鈕隱藏）依然無法實現。
所以，還是在1和2中選擇，但是如何實現動畫化呢（緩慢滾動到頂部）？網上查詢得來思路是 使用setInterval來定時循環減少scrollTop的值。但這樣1就不太好用了，所以還是選中了2，因爲scrollTop可以被監控到，也可以被修改操控。
mounted() {
window.addEventListener('scroll', this.handleScroll); //添加監聽事件
},
destroyed() {
window.removeEventListener('scroll', this.handleScroll); //移除監聽事件
},
handleScroll() { //監控scrollTop 的值，根據其變化執行相應操作（回到頂部按鈕的顯示和隱藏）
if (document.documentElement.scrollTop >= 200) {
this.isTop = false;
}else{
this.isTop = true;
}
},
goToTop(){ //回到頂部方法 點擊按鈕調用
let top = document.documentElement.scrollTop;
// 實現滾動效果
const timeTop = setInterval(() => {
document.documentElement.scrollTop = top -= 50;
if (top <= 0) {
clearInterval(timeTop); //清除定時器
}
}, 10);
},
以上方法都是網上學習借鑑而來，我只是總結歸納一下。希望對各位有幫助，謝謝