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