实现纯 CSS 平滑滚动：只需一行代码即可替代 JavaScript

时间：2026-08-05 14:04:01 编辑：袖梨来源：一聚教程网

无需 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 提供的优雅解法——以声明式语法取代脚本逻辑，让滚动体验更自然，让代码更轻量。