实现纯 CSS 平滑滚动：只需一行代码即可替代 JavaScript
作者：袖梨
2026-08-05
无需 javascript，仅用 scroll-behavior: smooth; 这一行 css 即可为页面内锚点跳转（如导航栏链接到页内章节）启用原生、流畅的滚动动画，兼容现代主流浏览器。
无需 javascript，仅用 scroll-behavior: smooth; 这一行 css 即可为页面内锚点跳转（如导航栏链接到页内章节）启用原生、流畅的滚动动画，兼容现代主流浏览器。
要为整个网页启用平滑滚动效果，只需在根元素（通常是 <html>）上设置：
html { scroll-behavior: smooth;}
推荐写法（简洁且语义明确）：
* { scroll-behavior: smooth;}
或更稳妥地作用于根容器：
html { scroll-behavior: smooth;}
注意事项：
- 该属性仅对通过 <a href="#section-id"> 触发的锚点跳转、window.scrollTo()（CSS 控制时需配合 behavior: smooth）等原生滚动行为生效；JavaScript 中调用 element.scrollIntoView() 时仍需显式传入 { behavior: 'smooth' }。
- 浏览器支持良好（Chrome 61+、Firefox 36+、Safari 15.4+、Edge 79+），但旧版 Safari（<15.4）及 IE 完全不支持，建议结合渐进增强策略，无需降级 JS 方案——不支持时自动回退为默认瞬时滚动，体验无损。
- 不影响性能：由浏览器原生渲染管线优化，零额外脚本开销，完美契合“极简 JavaScript”设计哲学。
? 小技巧：若仅需局部区域（如模态框、卡片列表）启用平滑滚动，可将该声明应用于对应容器（需设 overflow: auto/scroll），例如：
.scroll-container { overflow-y: auto; scroll-behavior: smooth;}
一句话总结：scroll-behavior: smooth; 是现代 CSS 提供的优雅解法——以声明式语法取代脚本逻辑，让滚动体验更自然，让代码更轻量。
