锚点跳转不准的根本原因是动态内容加载导致目标位置计算错误，需禁用默认行为、按序加载前置区块、滚动后校验重定位，并确保加载逻辑与滚动时机语义一致。
锚点跳转不准，不是浏览器 bug，而是你没告诉它“页面还没定型”。动态加载内容（比如懒加载图片、AJAX 填充区块）会让 offsetTop 或 scrollIntoView 计算出错——因为它们读的是当前 DOM 高度，而真实目标位置在内容插入后才就位。
scroll-margin-top 不能解决动态高度偏移
scroll-margin-top 只修正固定头部遮挡，对动态插入导致的定位漂移完全无效。它作用于目标元素自身，不感知前置区域是否已加载、高度是否已稳定。
- 适用场景：顶部有
position: fixed导航栏，且所有内容初始就渲染完成 - 失效场景：点击
#category-d时，#category-b和#category-c还是空占位符，scroll-margin-top无法阻止它们后续撑开页面 - 参数差异：
scroll-margin-top: 60px是静态偏移，不能随 AJAX 加载延迟自动重校准
禁用默认锚点行为 + 手动 scrollTo 是必要起点
浏览器原生锚点跳转会立即触发滚动，根本不管内容有没有加载完。必须用 e.preventDefault() 拦住它，才能插入加载判断逻辑。
- 常见错误现象：点击链接后页面闪一下就停在错误位置，控制台无报错，但
document.querySelector('#xxx')能取到元素——说明 DOM 存在，只是高度未就绪 - 实操建议：给所有导航链接绑定事件，提取
href后统一走scrollToTarget()函数，而不是依赖location.hash自动跳转 - 性能影响：避免在
scroll事件里反复调用offset().top，改用getBoundingClientRect().top + window.scrollY更可靠（尤其在缩放或 iframe 场景下）
ensureCategoriesLoadedUpTo() 必须按顺序加载前置区块
目标元素前面的内容没加载，它的 offsetTop 就永远不准。不能只加载目标本身，必须确保从首屏到目标之间的所有懒加载区块都 resolve 完。
立即学习“前端免费学习笔记（深入）”；
- 使用场景：长页面分章节（
#chapter-1→#chapter-5），每个章节用data-src延迟加载内容 - 关键逻辑：遍历 DOM，找出目标元素前所有带
data-src的父级容器，逐个触发fetch()并await完成；不要用Promise.all()并行加载——可能触发过多并发请求，反而拖慢关键路径 - 容易踩的坑：用
$(target).prevAll('.category[data-src]').each(...)时，若中间有已加载区块，会重复请求；应先过滤:not([data-loaded])
滚动完成后必须做一次重定位校验
即使等了所有前置内容加载完，仍可能因字体加载、图片解码、CSS 动画等微小延迟造成几像素偏差。一次滚动不够，得加兜底校验。
- 实操建议：在
window.scrollTo({ behavior: 'smooth' })的scrollend事件回调里，重新计算目标元素位置，若偏差 > 5px，立刻再执行一次scrollTo()（最多重试 2 次，避免死循环） - 兼容性注意：
scrollend在 Safari 15.4+ 和 Chrome 94+ 支持，老版本需 fallback 到requestIdleCallback(() => {...})或setTimeout(..., 100) - 为什么不做三次以上：页面布局抖动本身就有不确定性，过度重试反而让用户感知卡顿，5px 是人眼不可察觉的容差阈值
真正难的不是写几行滚动代码，而是让加载逻辑和滚动时机达成语义一致——你要清楚告诉 JS：“我现在要跳，别触发任何懒加载”，也要让懒加载监听器能识别“这是用户主动跳转，不是自然滚动”。这两者没对齐，偏移问题就会反复出现。
