需要设置滚动条的位置，比如要回到顶部，或是固定到某个位置

有时候需要设置滚动条的位置，比如：

1.vue使用vue-router在切换路由时，如果页面不需要请求接口的话，则不会刷新页面，这时候浏览器会保留上个页面的滚动条位置，在下一个页面仍保留在该位置，

2.聊天框里，设置的height：100%，这样高度超出会出现滚动条，在每次输入新的消息点击发送时，聊天框里位置仍停留在当前位置，还得手动翻到最新消息处。

 

实现代码：

1.路由切换时，跳转页面均要显示在顶部：

main.js文件加下面代码：

// 跳转后返回顶部
router.afterEach((to,from,next) => {
  window.scrollTo(0,0);
})

2.聊天框里发送完新的消息，需要直接滑到最下面：

<div class="information_content" ref="list" id="message-box"></div>

//聊天框始终保持在最下面
page_init(){
  var div = document.getElementById('message-box');
  div.scrollTop = div.scrollHeight;
},

var t = setTimeout(() => {
  this.page_init();
}, 300);

 

注意：

1.在实现代码2里，我写了个定时器去调用这个方法，因为在发出消息后可能会有延迟，这时候高度获取到的并不是最新的，就没办法去定位到最新消息处了。

2.在实现代码1里，如果发现在main.js里加如上代码不生效，可以看看是不是app.vue里给app设置了高度100%。

3.主要思想就是改变元素的scrollTop值，即滚动条的位置，是0或是当前元素的最大高度。

 

参考链接：http://www.superl.org/post-JSsxdivysdgdtdzdgdddb.html