原生锚点在异步加载页面中不可靠，根本原因是目标元素未挂载导致document.getElementById返回null，浏览器静默失败；可靠解法是用scrollIntoView配合加载感知，在元素真实存在且布局稳定后滚动，并确保behavior: 'smooth'和block: 'start'参数完整。
原生锚点在异步加载页面里基本不可靠——不是滚错位置，就是压根不动。根本原因不是 JS 没写对，而是浏览器按旧 DOM 快照计算滚动位置，而目标元素的真实 offsetTop 在内容插入后已改变。
为什么 href="#section-3" 点击后停在空白处
动态加载（如 Vue v-if、React useEffect、AJAX 插入）导致目标元素在点击瞬间尚未挂载。浏览器执行原生跳转时调用 document.getElementById("section-3") 返回 null，于是静默失败，地址栏变但页面不动。
- 检查方式：点击链接后立即在控制台运行
document.getElementById("section-3")，返回null就是 DOM 还没就位 - 常见误判：以为是 CSS 遮挡或
scroll-behavior没生效，其实连目标都没找到 - Vue 用户注意：
mounted钩子只保证组件实例挂载，不保证子内容（如远程加载的列表）已渲染完成
scrollIntoView + 加载感知才是可靠解法
放弃原生 href 跳转，改用 JS 主动控制时机。关键不是“立刻滚动”，而是“等目标真实存在且布局稳定后再滚动”。
- 监听目标元素是否已挂载并可见：
if (el && el.offsetParent !== null)，比单纯查getElementById更准 - 对懒加载区域，需结合加载完成事件（如 AJAX
success回调、IntersectionObserver的isIntersecting变为true后再触发） - 滚动参数必须带
{ behavior: 'smooth', block: 'start' }，漏掉behavior会退化为瞬时跳转 - 示例（通用 JS）：
function scrollToTarget(id) { const el = document.getElementById(id); if (!el || el.offsetParent === null) { // 目标未就绪，延迟重试（避免死循环） setTimeout(() => scrollToTarget(id), 100); return; } el.scrollIntoView({ behavior: 'smooth', block: 'start' }); }
fixed 头部遮挡时 scroll-margin-top 为何有时失效
scroll-margin-top 只作用于目标元素自身，但如果该元素被包裹在 transform、overflow: hidden 或 will-change: transform 的父容器内，浏览器会将其排除在滚动锚点上下文之外——此时属性被忽略，仍会贴顶滚动并被遮挡。
立即学习“前端免费学习笔记（深入）”；
- 排查方法：开发者工具中选中目标元素 → 查看 Computed 样式 → 检查
scroll-margin-top是否生效（非not set） - 修复顺序优先级：先确保目标元素父级没有
overflow: hidden；再确认无transform或will-change截断；最后才加scroll-margin-top - 兼容旧浏览器（如 Safari scrollIntoView 并手动减去头部高度：
el.scrollIntoView({ behavior: 'smooth', block: 'start' }); window.scrollBy(0, -64);
scroll-behavior: smooth 写在哪才真正起作用
这个 CSS 属性必须作用于主滚动容器，即 html 元素。写在 body、* 或任何 class 上都无效，因为页面级滚动的上下文根是 html，不是视觉上“在动”的 body。
- 验证方式：DevTools 中选中
标签 → 查看 Computed → 找scroll-behavior值是否为smooth - 常见冲突：某些 UI 框架（如 Ant Design）的 reset.css 会强制
html { scroll-behavior: auto !important; }，需用更高优先级覆盖 - 注意副作用：若
html或body上有overflow: hidden，会直接禁用所有锚点滚动行为
最易被忽略的组合陷阱是：DOM 已存在，但父容器用了 transform 或 will-change ——这时 scroll-margin-top 和 scrollIntoView 都可能失效，必须从布局层清理截断源。动态加载场景下，永远假设“目标位置是浮动的”，而不是静态坐标。
