經常有這樣的需求：點擊一個鏈接（內鏈）跳轉到當前頁面中間某個部分。對於這樣的需求，很容易想到使用錨點實現。但有一個問題：滾動一步到位，太生硬了。
我還是比較喜歡平滑滾動。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類似。
示例
//錨點連接
$('.menuItem').on('click',function(){
var idName = '#menu' + $(this).prev().data('menuid')
if(document.querySelector(idName)){
document.querySelector(idName).scrollIntoView({
behavior: "smooth", // 默認 auto
block: "center", // 默認 center
inline: "nearest", // 默認 nearest
});
}
})
https://codepen.io/CarterLi/p...
可惜的是，目前瀏覽器支持度欠佳。而 scroll-behavior 作為一個 CSS 屬性，不能被 polyfill。scrollIntoView 作為一個 JavaScript 函數對 polyfill 很友好。在目前的情況下，推薦使用 scrollIntoView 加 polyfill 的方式