scroll-behavior: smooth 在编辑器中常失效，因其仅对根滚动容器或直接可滚动元素生效，而多数编辑器（如 CodePen、Typora）将内容置于 iframe 或自定义滚动容器内，导致样式作用对象错误；需定位真实滚动容器并对其设置该属性，或改用 scrollIntoView({behavior: 'smooth'}) 降级处理。
为什么 scroll-behavior: smooth 在编辑器里常失效
因为多数 HTML 编辑器（如 CodePen、JSFiddle、Typora 预览、VS Code Live Server 默认配置）会把编辑内容包裹在 iframe 或自定义滚动容器中，而 scroll-behavior 只对根滚动容器（document.documentElement 或具有 overflow 的直接可滚动元素）生效。如果你给 body 设了 scroll-behavior: smooth，但实际滚动发生在父级 div#editor-container 上，那它完全不会触发平滑滚动。
常见错误现象：href="#section2" 点击后瞬间跳转、无动画；控制台无报错，CSS 也看似正确。
- 检查真正滚动的容器：右键锚点目标 → “检查元素”，往上找第一个
overflow-y: auto|scroll且height或max-height受限的祖先元素 - 必须对该容器（而非
body或html）设置scroll-behavior: smooth - 若编辑器强制使用 iframe（如 CodePen 的 “Editor View”），你无法控制其
document样式，此时需改用 JavaScript 滚动
在支持原生 smooth 的编辑器中正确启用
像 VS Code 的 Live Server 插件、或本地双击打开的 HTML 文件（无服务器拦截），只要页面结构干净，就能直接用 CSS 方案。关键不是加不加样式，而是加在哪。
正确写法示例：
立即学习“前端免费学习笔记（深入）”；
html {
scroll-behavior: smooth;
}
/* 或更稳妥地同时声明 */
body {
scroll-behavior: smooth;
}
但注意：Safari 直到 v15.4 才支持 scroll-behavior，旧版需降级；而且 Safari 对 html 元素的支持不稳定，优先用 body。
- 不要只写
body { scroll-behavior: smooth; }却忘了移除body { height: 100%; overflow: hidden; }这类禁用滚动的样式 - 锚点目标（如
<h2 id="section2">）必须是文档流中真实存在的元素，不能是display: none或visibility: hidden - 若用 Web Components 或 Shadow DOM，
scroll-behavior不穿透，必须在 shadow root 内部单独设置
编辑器内 fallback：用 Element.scrollIntoView() 补救
当 CSS 失效（iframe 场景、老浏览器、滚动容器非 body），最可靠的方式是拦截默认跳转，调用 JS 滚动。注意别用已废弃的 window.scrollTo(x, y) 手动计算位置——容易因 sticky header、margin-collapse 偏移。
推荐写法：
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
const targetId = this.getAttribute('href').slice(1);
const targetEl = document.getElementById(targetId);
if (targetEl) {
e.preventDefault();
targetEl.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
-
block: 'start'确保锚点顶部对齐视口，比默认'center'更符合传统锚点习惯 - 必须加
e.preventDefault()，否则会先闪跳再滚动 - 如果编辑器内容在 iframe 里，这段脚本要注入到 iframe 的上下文中（例如 CodePen 的 JS panel 是作用于主窗口，不是预览 iframe）
VS Code Live Server 和 Typora 的实操差异
VS Code Live Server 默认服务的是纯静态 HTML，scroll-behavior 可直接生效，但要注意：它默认开启缓存，修改 CSS 后可能不刷新行为，强制硬刷新（Ctrl+Shift+R）或关掉浏览器缓存调试。
Typora 是个特例：它的实时预览不是标准浏览器渲染，而是基于 Electron + 自定义渲染器，scroll-behavior 完全不支持，scrollIntoView 也受限（部分版本仅支持 behavior: 'auto'）。此时唯一稳定方案是导出为 HTML 后用浏览器打开。
- Typora 中测试平滑滚动，必须勾选「文件 → 导出 → HTML」，再用 Chrome/Firefox 打开生成的文件
- Live Server 下若用了 PWA 或 Service Worker，可能劫持导航请求，导致锚点跳转被拦截，临时禁用 SW 可验证
- 所有方案都依赖目标元素已渲染完成——若锚点由 JS 动态插入，需确保
scrollIntoView调用在其appendChild之后，必要时用requestAnimationFrame延迟
真正麻烦的从来不是“怎么写 smooth”，而是搞清“谁在滚动”和“谁允许你滚动”。编辑器环境的封装层级，常常比想象中多一层。
