页面的平滑滚动

前端工作中经常有在页面滚来滚去的需求，HTML5 中提供了 CSS 属性 scroll-behavior 并且修改了一系列滚动函数的可接受参数用于支持平滑滚动特性。

CSS 属性 scroll-behavior

接受两个自定义值：auto 和 smooth,默认值为 auto。smooth 即表示平滑滚动。这个对函数scrollTo，scrollIntoView，浏览器滚动条卷去的scrollTop、scrollLeft 等 DOM 属性改变时的滚动行为。如果在根属性html上加上 scroll-behavior为smooth。表示应用在视口（viewport）上。这时对锚点、内链触发的视口滚动同样有效。
只需要给 html 元素设置样式 scroll-behavior: smooth点击内链就会触发页面的平滑滚动

函数 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表示块级元素排列方向要滚动到的位置,就是竖直方向。start 表示将视口的顶部和元素顶部对齐；center 表示将视口的中间和元素的中间对齐；end 表示将视口的底部和元素底部对齐；nearest表示就近对齐。
inline 表示行内元素排列方向要滚动到的位置,就是水平方向。其值与 block 类似。

注意

出于对浏览器兼容性考虑， scroll-behavior 作为一个 CSS 属性，不能被 polyfill，但是移动端还是可以的。scrollIntoView 作为一个 JavaScript 函数对 polyfill 很友好。在目前的情况下，推荐使用 scrollIntoView 加polyfill垫片的方式。