一行 CSS 实现平滑滚动效果

只需一行 CSS 代码 `scroll-behavior: smooth;`，就能为页面内锚点跳转（如导航栏直达章节）带来原生、流畅的平滑滚动体验，无需任何 JavaScript；它简洁高效、语义清晰，兼容主流现代浏览器，是提升网页交互质感的极简神技——让滚动不再生硬，让用户体验悄然升级。

无需 JavaScript，仅用 scroll-behavior: smooth; 这一行 CSS 即可为页面内锚点跳转（如导航栏链接到页内章节）启用原生、流畅的滚动动画，兼容现代主流浏览器。

无需 JavaScript，仅用 scroll-behavior: smooth; 这一行 CSS 即可为页面内锚点跳转（如导航栏链接到页内章节）启用原生、流畅的滚动动画，兼容现代主流浏览器。

要为整个网页启用平滑滚动效果，只需在根元素（通常是 ）上设置：

html {
  scroll-behavior: smooth;
}

✅ 推荐写法（简洁且语义明确）：

* {
  scroll-behavior: smooth;
}

或更稳妥地作用于根容器：

html {
  scroll-behavior: smooth;
}

⚠️ 注意事项：

• 该属性仅对通过 触发的锚点跳转、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 提供的优雅解法——以声明式语法取代脚本逻辑，让滚动体验更自然，让代码更轻量。

终于介绍完啦！小伙伴们，这篇关于《一行 CSS 实现平滑滚动效果》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！