scroll-behavior: smooth 必须写在 html 元素上，仅对原生锚点跳转和 scrollIntoView() 生效；失效主因是容器非 html、目标不可见或被遮挡、框架覆盖样式及 iOS Safari 旧版本兼容问题。
直接写 html { scroll-behavior: smooth; } 就能生效，但 90% 的失效不是代码错，而是滚动容器、目标可见性或框架干扰出了问题。
scroll-behavior 必须作用在 html 元素上
浏览器的根滚动容器是 html，不是 body 或某个 div。写在其他地方基本无效——哪怕本地测试“好像动了”，也大概率是 JS 干预或浏览器偶然行为。
-
html { scroll-behavior: smooth; }是唯一推荐写法，不要加!important，也不要套在媒体查询或 CSS-in-JS 动态规则里 - 某些 UI 框架（如 Ant Design）或重置库（如 modern-normalize）会悄悄写
html, body { scroll-behavior: auto !important; }，必须用开发者工具检查computed样式确认是否被覆盖 - 如果页面用了
height: 100vh+overflow: hidden，html实际不可滚动，该属性自然不触发
锚点跳转仍“瞬移”？先查这三处断点
scroll-behavior: smooth 只在满足条件时才接管滚动。它不报错，也不提示，失效时表现就是“啪”一下跳过去。
-
href和目标id必须严格一致：大小写、连字符、下划线都不能错，#contact-us对应id="contact-us"可以，#contact_us就不行 - 目标元素不能被隐藏：
display: none、visibility: hidden、父级overflow: hidden或transform都会让浏览器无法计算其位置 - 目标必须在默认文档流中：如果用了
position: absolute脱离布局，或被包在overflow: auto的局部滚动容器里，html上的声明就管不到它
固定头部遮住内容？用 scroll-margin-top，别算 offsetTop
浏览器默认把锚点元素顶部对齐视口顶部，position: fixed 或 sticky 导航栏会直接盖住内容。这不是滚动不准，是定位逻辑本身没考虑头部高度。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 给目标元素加
scroll-margin-top，例如：h2[id] { scroll-margin-top: 60px; } - 值建议与导航栏实际高度一致；响应式场景可用
scroll-margin-top: clamp(50px, 8vh, 80px); - 不要给
html或body加scroll-padding-top——它控制的是整个视口内边距，和锚点定位无关
编辑器里不生效？你可能根本没滚动 html
CodePen、Typora、VS Code Live Server 等环境常把内容包裹在 iframe 或自定义滚动容器中，而 scroll-behavior 只对实际发生滚动的容器生效。
- 右键锚点目标 → “检查元素”，往上找第一个
overflow-y: auto | scroll且有高度限制的祖先元素 - 必须对该容器（比如
.editor-content）设置scroll-behavior: smooth，而不是html - 若编辑器强制使用
iframe（如 CodePen 的 Editor View），你无法控制其document样式，此时需改用element.scrollIntoView({ behavior: 'smooth' })
真正容易被忽略的是：这个属性只影响原生锚点跳转和 scrollIntoView() 的默认行为，对 window.scrollTo() 等手动调用完全无效——后者必须显式传入 { behavior: 'smooth' }。而且 iOS Safari ≤15.4 基本不支持，15.4–16.0 支持但常卡顿，16+ 仅对 JS 方法有效，html 上的声明基本被忽略。
