开发首页出现滚动条回到顶部的需求，也不能直接回到，要缓慢回滚。
旧项目使用的是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);
},
以上方法都是网上学习借鉴而来，我只是总结归纳一下。希望对各位有帮助，谢谢