經常有這樣的需求：點選一個連結（內鏈）跳轉到當前頁面中間某個部分。對於這樣的需求，很容易想到使用錨點實現。但有一個問題：滾動一步到位，太生硬了。
我還是比較喜歡平滑滾動。HTML5 中提供了 CSS 屬性 scroll-behavior 並且修改了一系列滾動函式的可接受引數用於支援平滑滾動特性。
scroll-behavior
這個 CSS 屬性就只接受兩個自定義值：auto 和 smooth。預設值為 auto，表示立刻滾到底；smooth 即表示平滑滾動。這個屬性會影響滾動函式 scrollTo、scrollIntoView 等的預設滾動行為，也會影響 scrollTop、scrollLeft 等 DOM 屬性改變時的滾動行為。如果 scroll-behavior 被設定在根元素（<html>）上，表示應用在視口（viewport）上。這時對錨點、內鏈觸發的視口滾動同樣有效。
所以只需要給 html 元素設定樣式 scroll-behavior: smooth 點選內鏈就會觸發頁面的平滑滾動，很簡單吧。
scrollIntoView
上面說到：scroll-behavior 是指定滾動函式的預設行為，這其中就包括 scrollIntoView。顧名思義：這個函式就是把某個元素滾動到視窗的可見區域。
它接受兩種形式的值：布林值或物件。接受布林值主要還是為了相容不支援平滑滾動（老版）的瀏覽器。我們這裡只說物件值。
{
behavior: "auto" | "instant" | "smooth", // 預設 auto
block: "start" | "center" | "end" | "nearest", // 預設 center
inline: "start" | "center" | "end" | "nearest", // 預設 nearest
}物件可以有三個引數。
-
behavior表示滾動方式。auto表示使用當前元素的scroll-behavior樣式。instant和smooth表示直接滾到底和使用平滑滾動。 -
block表示塊級元素排列方向要滾動到的位置。對於預設的writing-mode: horizontal-tb來說，就是豎直方向。start表示將視口的頂部和元素頂部對齊；center表示將視口的中間和元素的中間對齊；end表示將視口的底部和元素底部對齊；nearest表示就近對齊。 -
inline表示行內元素排列方向要滾動到的位置。對於預設的writing-mode: horizontal-tb來說，就是水平方向。其值與block類似。
示例
https://codepen.io/CarterLi/p…
可惜的是，目前瀏覽器支援度欠佳。而 scroll-behavior 作為一個 CSS 屬性，不能被 polyfill。scrollIntoView 作為一個 JavaScript 函式對 polyfill 很友好。在目前的情況下，推薦使用 scrollIntoView 加 polyfill 的方式