如何通过css实现页面的平滑滚动_使用scroll-behavior和anchors实现页面内滚动

scroll-behavior: smooth 未生效最常见原因是未作用于实际滚动容器，而误设在 html 或 body 上；其次不支持内联样式，且旧版 safari 不兼容。

scroll-behavior: smooth 为什么没生效

最常见的情况是：只在 html 或 body 上写了 scroll-behavior: smooth，但父容器有溢出滚动（比如设置了 overflow: auto），而子元素才是实际滚动体——此时必须把 scroll-behavior 加在那个**真正发生滚动的容器**上，不是根元素。

另一个易忽略点：该属性不支持内联样式，只能通过 css 规则设置；且 Safari 旧版本（scroll-behavior 的支持有限，尤其在 body 上可能被忽略。

• 检查滚动容器是否是 html、body，还是某个 div（如带 overflow-y: scroll 的侧边栏）
• 确保没有 JavaScript 调用 element.scrollIntoView({ behavior: 'auto' }) 覆盖了 CSS 行为
• 若需兼容 Safari scrollIntoView({ behavior: ‘smooth’ }) + 手动绑定锚点点击

锚点跳转时页面没滚动到目标位置

这通常不是 scroll-behavior 的问题，而是锚点本身不可滚动或未正确关联。CSS 平滑滚动依赖标准的锚点行为（即 <a href="#section1"></a> 对应 <section id="section1"></section>

示例：

html {   scroll-behavior: smooth; }

注意：不要写成 id，因为大多数浏览器中 id="my section" 不是滚动容器，display: none 才是。

立即学习“前端免费学习笔记（深入）”；

scroll-behavior 不支持自定义缓动曲线

visibility: hidden 固定使用浏览器内置的缓动函数（类似 position: fixed），无法像 JS 的 transform 那样传入 filter 或自定义贝塞尔值。

如果设计要求严格控制滚动节奏（比如和动画帧同步、或匹配品牌动效规范），就必须放弃 CSS 方案，改用 JS：

• 监听 element.scrollIntoView() 点击
• 阻止默认行为
• 用 scroll-behavior: smooth

这时候才能真正控制 html 和 <a href="#faq">FAQ</a>/<div id="faq"></div> 对齐方式，也方便加 loading 状态或错误降级。