需要設置滾動條的位置，比如要回到頂部，或是固定到某個位置

有時候需要設置滾動條的位置，比如：

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