問題描述
今天在做頁面UI改版的時候發現，我之前使用的是dom.scrollIntoView(); 使得點擊右側題目編號的時候，讓左側題目滾動到頁面可視區域。
如果不知道
scrollIntoView如果使用，我有篇文章專門寫了scrollIntoView的簡單使用：scrollIntoView() 讓元素進入可視區域 · Issue #167
但是現在有個問題就是，當點擊題目編號的時候，除了題目會滾動到可視區域，整個頁面也會稍稍往上滾動，導致頁面錯位。
如下圖所示，當我點擊第9題的時候，左側第9題移動到視口中，但是整個頁面包括導航欄都往上移動了，且無法在移回來，整個頁面是沒有滾動條的。
問題分析
這個時候唯一的可能就是scrollIntoView()函數引起的問題。
我之前懷疑是不是該函數給整個頁面加了transform 屬性導致整個頁面往上偏移，通過查看css，發現沒有。
沒有想到辦法。只能藉助搜索引擎了，於是我在Stack Overflow 上面找到了一篇文章：
javascript - ScrollIntoView() causing the whole page to move
說的正好是這種情況。
最高贊給出的解決方法是：放棄使用scrollIntoView 改用scrollTop 來操作滾動條。
var target = document.getElementById("target");
target.parentNode.scrollTop = target.offsetTop;
offsetTop：元素上外邊框距離父元素上內邊框的距離（簡單來說就是元素相對父元素上邊的距離）
這段代碼好理解，就是當前需要顯示的元素距離父元素頂部的距離，也就是滾動條滾動的高度。
這段代碼執行後，就可以讓該元素到達父元素頂部的位置。
注意事項：offsetTop 不一定是相對於父元素的，如果有很多父元素的話，它是相對於第一個
定位的父元素的。如果第一個父元素未定位（相對
relative、絕對absolute或固定fixed），則可能需要將第二行更改爲：
target.parentNode.scrollTop = target.offsetTop- target.parentNode.offsetTop;參考 offset 相關屬性：Web/06-一文搞懂DOM相關距離問題
解決方法
代碼如下，加上動畫：
var target = document.getElementById("target");
$(target).animate({"scrollTop": target.offsetTop }, 'normal');
這是使用 jQuery 的animate 動畫函數。
animate函數使用方法：https://jquery.cuishifeng.cn/animate.html
如果不使用 jQuery 的話，由於scrollTop 是js屬性，不是css屬性，所以不能使用transition 來設置動畫。動畫效果要自己寫嘍。
下面是一個參考例子：javascript - scrollTop animation without jquery
相關問題
類似的問題和解決方法如下鏈接：
（完）
原文首發地址：https://github.com/Daotin/fe-blog/issues/
你也可以從下面地方找到我：
- Github個人主頁
- 公衆號：前端隊長