Vue页面滚动条复原问题

解决Vue单页面滚动条问题

今天工作时遇到了一个问题，Vue页面切换时，滚动条维持在前一个页面的状态，也就是滚动条没有归零。其实这个问题在Vue路由跳转时解决了这个问题。在activated钩子函数中将滚动条清零就可以了。

   let dom = document.getElementById(id);
   if (dom != null) {
          if (dom.scrollTop > 0) {
            dom.scrollTop = 0;
          }
   }

这样在切换页面时，就可以保障滚动条在最顶端。

最近对项目进行了简化，将项目修改为使用一个模板切换多个界面，其实就是单页面。这个时候原来使用路由的方式被弃用了，因此最近又发现了滚动条的问题。我想了几种解决方案。

一、使用created函数

我是这样想的，既然要保证滚动条在顶端，那就在页面挂载之前把滚动条归零。在实践之后，发现这个方案是行不通的，因为在created函数中获取不到元素，因此这个方案失败。

二、在切换页面的方法中将滚动条设为0

其实一开始就该想到问题的源头在这。

  let dom = document.querySelector('#id')
        if(dom!==null){
          dom.scrollTop = 0;
        }

就是这么简单，解决了滚动条问题。