CSS scroll-behavior 平滑滚动

scroll-behavior:smooth属性（无需JS平滑滚动）、scroll-padding-top配合fixed导航栏锚点偏移、scroll-margin-top元素滚动边距、scroll-snap-stop控制惯性滚动停止点 · 难度：入门 · +10XP

CSS scroll-behavior —— 页面丝滑滚动

点击了页面内锚点链接（如"返回顶部"），页面瞬间跳过去——这体验很粗暴。scroll-behavior: smooth 让浏览器用平滑动画滚动到目标位置。

一行代码搞定

html {
  scroll-behavior: smooth;
}

只需这一行！所有锚点跳转、window.scrollTo()、Element.scrollIntoView()都会自动平滑过渡。

配合滚动边距

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;  /* 给固定的导航栏留空间 */
}

scroll-padding-top确保滚动到的目标不会被顶部固定导航栏挡住。

两个值

动手练习

1. 基础练习：做一个有多个章节锚点的长页面，加scroll-behavior:smooth，体验丝滑的锚点跳转。
2. 进阶应用：做一个"滚动到顶部"按钮——点击后用window.scrollTo({top:0,behavior:'smooth'})平滑返回。
3. 项目实战：给网站的所有锚点导航加smooth滚动，设好scroll-padding-top适配固定导航栏。