CSS scroll-behavior：平滑滚动与可访问协作

---

title: CSS scroll-behavior：平滑滚动与可访问协作

keywords:

• scroll-behavior
• smooth
• prefers-reduced-motion
• 锚点导航
• 可访问性

description: 说明 scroll-behavior 的平滑滚动效果与用户偏好协作，结合 prefers-reduced-motion 与锚点控制，提升导航体验并兼顾可访问性。

categories:

• 文章资讯
• 编程技术

---

概述

scroll-behavior: smooth 提供原生平滑滚动效果，适合锚点导航与页面跳转。需与 prefers-reduced-motion 协作，尊重用户降低动效的偏好。

示例

html { scroll-behavior: smooth }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } }

工程建议

• 可访问性：为长滚动提供“返回顶部”与定位提示；避免过度动画造成不适。
• 与锚点：结合 scroll-margin/scroll-padding 控制定位；处理固定头遮挡。
• 兼容：在旧浏览器回退到 JS 实现；确保性能与节流。

参考与验证

• MDN scroll-behavior 文档：https://developer.mozilla.org/docs/Web/CSS/scroll-behavior
• web.dev 动效与可访问指南：https://web.dev/articles/prefers-reduced-motion