使用JavaScript（本機或jQuery）平滑滾動HTML書籤
通過HTML書籤，您可以使用錨鏈接快速轉到頁面上的任何部分，例如以下示例：
|
1 2 3 4 |
|
預設情況下，這個過程是突然而且瞬間完成的，就像在清晨從床上猛拉一樣。對許多人來說，這不是一次愉快的經
有許多JavaScripts可以平滑過渡到HTML書籤的行為，儘管所有這些都依賴於動畫文件的scrollTop
在現代瀏覽器中，現在有一種本地方式可以通過錨鏈接將頁面平滑地滾動到特定元素。在本教程中，我將向您展示如何使用ES6指令碼和DOM方法scrollIntoView() 以最少的程式碼和沒有JavaScript框架來實現這一點。
對於那些仍然需要遺留瀏覽器支援的人，我還會提供一個在舊版瀏覽器中執行的jQuery替換指令碼。
演示：點選下面的錨點連結。Smooth Scrolling適用於Chrome和Firefox。書籤本身適用於所有瀏覽器：
-
使用Native JavaScript平滑HTML書籤滾動
-
使用history.pushState()更新瀏覽器的URL歷史記錄
-
瀏覽器支援本機HTML書籤滾動
-
使用jQuery建立平滑滾動書籤連結
使用Native JavaScript平滑HTML書籤滾動
為了能夠原生地平滑滾動到頁面上的任何元素，我們可以轉向舊的JavaScript方法，該方法已在現代瀏覽器中更新，以支援平滑移動到頁面上的元素。element.scrollIntoView()
在所有較新版本的Chrome，Firefox和Opera中，該 scrollIntoView()方法支援一些新選項，其中一個是“ behavior”選項，可以實現平滑滾動：
|
1 2 3 4 |
|
Element是您希望導航到的DOM元素。除了“ behavior” 之外還有其他選項，您可以在MDN上了解這些 選項。
我們需要做的就是定位頁面上的所有HTML錨點連結，並覆蓋它們的預設行為， element.scrollIntoView()以便輕柔地平滑到它們引用的元素。使用ES6 JavaScript，整個事件是無痛的。
使用ES6 JavaScript的最終結果如何：
演示：
完整程式碼：
|
1 2 3 4 五 6 7 8 9 10 11 12 13 14 |
|
只需上面的程式碼片段，無論是在頁面末尾新增還是在頁面載入時執行的包裝器內部，頁面上的所有錨點連結都會在單擊時平滑地滾動到所請求的元素。涼！
注意上面突出顯示的行。這是一個很酷的技巧，#target可以在每次跳轉後使用hash（）靜默更新瀏覽器的URL ，這樣使用者也可以通過瀏覽器的URL輕鬆導航到該元素，就像使用真正的HTML書籤一樣。更多關於此的資訊。
使用history.pushState()更新瀏覽器的URL歷史記錄
預設情況下，呼叫element.scrollIntoView() 不會使用可導航的雜湊來擴充瀏覽器的URL。這是一個巨大的短 ING，因缺乏火當方法已經完成滾動到目標元素的任何事件的進一步惡化。這意味著我們無法編寫在轉換後手動更新瀏覽器URL的自定義程式碼。
您可能只想使用JavaScript的 location.hash屬性來修改瀏覽器的URL。但是，這有一個問題。更新location.hash會導致瀏覽器立即跳轉到頁面上的目標元素，這會在scrollIntoView() 方法內部呼叫時中斷任何動畫。
而這正是可以COM實時得心應手即 它以靜默方式附加到瀏覽器的當前URL，而不會觸發任何進一步的操作。接受三個引數：history.pushState()history.pushState()
-
狀態物件：
{bar: "foo"}與此新歷史記錄條目關聯的文字物件。它可以是任何可以用JavaScript序列化的東西，可以通過屬性使用popstate事件處理程式 訪問資料state。 -
標題：歷史條目的標題。目前被大多數瀏覽器忽略。
-
URL：用於替換或附加當前瀏覽器URL的絕對或相對URL。在前一種情況下，URL必須與站點本身位於同一域中，否則將引發錯誤。
我們只對每次滾動元素時用雜湊更新瀏覽器的URL感興趣，所以我們需要這樣的一行：
|
1 |
|
而已。
瀏覽器支援本機HTML書籤滾動
上面的程式碼片段彙集了JavaScript中的一些現代功能，從ES6指令碼history.pushState()到“ behavior”選項scrollIntoView()。
該程式碼適用於所有最新版本的Chrome和Firefox。IE Edge尚不支援“ behavior”選項。然而，無論如何，好訊息是，如果舊版瀏覽器不支援該片段，則該指令碼不會阻止跳轉到目標元素。換句話說，這一切都很好。
使用jQuery建立平滑滾動書籤連結
如果您的網站已經使用了jQuery框架，那麼只要有可能就在您的網站上利用它是有意義的。
隨著滾動HTML書籤，您cgan使用下面的jQuery指令碼到交流COM plish這一點。它具有在IE Edge及以下版本中工作的額外好處，以及在目標元素滾動到之後指定轉換持續時間和任何自定義操作的功能：
|
1 2 3 4 五 6 7 8 9 10 11 12 13 14 |
|
使用jQuery的缺點顯然是jQuery本身的大量佔用空間。滾動指令碼也是效率要低得多 COM縮減到本機版本。但是，如果您已經在您的網站上載入了jQuery，那麼這些好處在我看來是值得的。
很高興看到瀏覽器向原生平滑滾動轉向HTML書籤。在我看來，它應該是瀏覽器中的預設行為，但這只是一個人的意見，不喜歡生活中任何事物的突然變化，包括在瀏覽器中。