💨超快CSS：平滑滚动

用这一句话彻底改变你网站的用户体验

工作示例

演示

注意事项

用这一句话彻底改变你网站的用户体验

html {
  scroll-behavior: smooth;
}

如果你和我一样，拥有一个单页网站，并且使用书签（通过 ID 引用元素的锚点标签）来允许用户导航到网站的不同部分，那么你需要添加这个CSS属性scroll-behavior: smooth;，它可以让页面内容平滑地滚动显示。

工作示例

下面这个 CodePen 示例演示了点击导航链接时内容的平滑滚动效果。

演示

注意事项

该scroll-behavior属性似乎对元素不起作用body，所以最好将其添加到html元素中。

并非所有浏览器都支持此属性，但这不应该阻止您使用它，因为它不会出错，并且默认行为与标准行为相同。

https://caniuse.com/#feat=mdn-css_properties_scroll-behavior