scroll-behavior: smooth 必须写在 html 元素上，且需同时保障 ID 合法唯一、目标已渲染、scroll-margin-top 补偿固定导航遮挡、语义结构正确（如仅用 main 包裹核心内容），并绕过 SPA 路由拦截确保 scrollIntoView 执行。
scroll-behavior: smooth 必须写在 html 元素上，否则长图文锚点跳转不会平滑；但光加这行 CSS 远不够——可访问性断裂常发生在 ID 匹配、目标渲染时机、固定导航遮挡和语义结构这四个环节。
锚点 ID 必须合法且唯一，否则屏幕阅读器静默失效
原生锚点不报错，错一点就彻底不工作。常见失效场景：
-
href写成section-1或/?id=section-1—— 必须是#section-1 - ID 以数字开头，如
id="1-intro"：旧版 Safari 和部分读屏工具无法定位 - ID 含中文、空格、句点或括号，如
id="联系我们"或id="contact.us"：浏览器解析中断 - 同一页面出现多个
id="faq"：只滚动到第一个，其余不可达 - 动态渲染内容（React/Vue）中点击时目标尚未挂载：
document.getElementById("section-2")返回null，跳转失败
固定导航栏遮挡目标？用 scroll-margin-top 补偿，别碰 padding
原生锚点把目标顶部对齐视口顶部，但 position: fixed 导航栏会盖住标题。错误做法是给 h2 加 padding-top 或负 margin-top —— 这破坏文档流，影响语音导航顺序，且响应式下极易错位。
正确做法是给目标元素加 scroll-margin-top：
立即学习“前端免费学习笔记（深入）”；
- 值应等于导航栏实际高度（含 border/padding），单位支持
px、rem、vh - 推荐选择器：
h2[id]、section[id]、[id^="section-"]，避免全局污染 - 若目标父容器有
transform、overflow: hidden或will-change: transform，该属性会被忽略
<main></main> 必须唯一且只包核心图文，否则屏幕阅读器跳过正文
<main></main> 是辅助技术的导航锚点，不是视觉容器。它被设计为按 M 键一键跳转到主内容的入口。常见错误：
- Next.js 布局组件里套一个
<main></main>，子页面又渲染一个 —— 屏幕阅读器只认第一个，后续内容被跳过 -
<main></main>里塞了顶部 banner、左侧菜单、页脚链接 —— 用户听完整页才能找到正文段落 - 用
<div class="main"> 替代 <code><main></main>—— 对可访问性零贡献，读屏工具只读出 “division”正确结构：
<main></main>只包裹真正需用户阅读/操作的图文块，比如文章正文、FAQ 列表、产品描述段落。SPA 中锚点被路由拦截？必须接管跳转并确保目标已渲染
Vue Router / React Router 默认阻止原生
#section-2跳转，scroll-behavior: smooth失效。不能只靠history.pushState()，关键在目标是否真实存在：- 监听
click事件，e.preventDefault() - 先用
history.pushState()更新 URL（保持前进/后退可用） - 再调用
document.getElementById(targetId).scrollIntoView({ behavior: 'smooth' }) - 若目标在 tab 切换后懒加载区域，等 DOM 渲染完成再执行 ——
MutationObserver比setTimeout更可靠 - 表单校验失败后滚动到首个错误字段，若该
input被fieldset[disabled]包裹，scrollIntoView会静默失败
最易被忽略的是：所有这些逻辑都依赖一个前提——目标元素的
id在 DOM 中真实存在、未被隐藏、且可交互。任何一环断开，对键盘用户和读屏用户来说，就是“页面卡住了”。 - 监听
