Vue中滚动条回到顶部及动画化（缓慢回滚）

开发首页出现滚动条回到顶部的需求，也不能直接回到，要缓慢回滚。

旧项目使用的是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);

    },

以上方法都是网上学习借鉴而来，我只是总结归纳一下。希望对各位有帮助，谢谢