scroll-behavior: smooth 最常见失效原因是未加在 html 根元素上，而误设于 body 或容器；必须写为 html { scroll-behavior: smooth; }，且需确保 html 无 overflow: hidden 等限制、页面有足够滚动高度、锚点 href 指向唯一合法 id。
scroll-behavior: smooth 为什么没生效
最常见原因是没加在 html 根元素上，而误加在 body 或某个容器里。CSS 的 scroll-behavior 只对“可滚动容器”起作用，而整页滚动的宿主是 html 元素（在大多数浏览器中），不是 body。
正确写法只有一行：
html {
scroll-behavior: smooth;
}
其他容易踩的坑：
-
html元素被设了overflow: hidden或height: 100%等限制，导致它失去滚动上下文 - 页面高度不足一屏，没有滚动余地，自然不触发
- 使用了第三方库（如 ScrollMagic、locomotive-scroll）接管了滚动，会覆盖原生行为
锚点链接必须指向 id，不能只靠 class 或 data 属性
平滑滚动依赖原生锚点跳转机制，所以 <a href="#section1"></a> 必须对应一个 <section id="section1"></section>。用 class="section1" 或 data-id="section1" 是无效的。
立即学习“前端免费学习笔记（深入）”；
注意几个细节：
- ID 值不能以数字开头（如
id="1-section"在部分浏览器中不可靠），建议用id="section-1" - ID 必须全局唯一；重复 ID 会导致跳转目标不确定
- 如果目标元素是动态插入的（如 Vue/React 渲染后），需确保它挂载完成后再触发跳转，否则可能滚动到页面顶部
如何兼容不支持 scroll-behavior 的旧浏览器
IE 完全不支持 scroll-behavior，Safari 在 iOS 15.4 之前也不支持。纯 CSS 方案失效时，得降级到 JavaScript。
最小可用 JS 替代方案（不用框架）：
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
const hash = this.getAttribute('href');
if (hash === '#') return;
const target = document.querySelector(hash);
if (target) {
e.preventDefault();
target.scrollIntoView({ behavior: 'smooth' });
}
});
});
关键点：
- 监听的是所有以
#开头的href，不是只监听导航栏链接 - 用
scrollIntoView({ behavior: 'smooth' })，不是window.scrollTo()—— 后者需要手动计算偏移，且兼容性更差 - 务必加
e.preventDefault()，否则会触发两次滚动（一次 JS，一次原生锚点）
滚动后 URL 哈希变化但不触发页面重载，是否影响 SEO 或路由
不会。哈希变化（#section2）属于前端路由范畴，不向服务器发起请求，搜索引擎爬虫通常忽略哈希片段，也不会因此重复索引内容。
但要注意：
- 单页应用（如 React Router）若用了 HashRouter，需避免和原生锚点混用，否则可能冲突或丢失状态
- 用户点击后退/前进按钮，浏览器仍会按哈希历史记录切换，这是预期行为，无需额外处理
- 如果想监听哈希变化做其他事（比如高亮当前导航项），用
window.addEventListener('hashchange', ...)即可
