锚点跳转失效因href缺#、js未调用scrollintoview或目标id不匹配；滚动高亮错位应改用intersectionobserver并设threshold:0.1；平滑滚动用scroll-behavior:smooth加scroll-margin-top；移动端失效需检查touch-action和pointer-events。
点击目录项跳转到对应锚点但页面不滚动？检查 href 值是否带 #
常见错误是目录链接写成 href="section1" 而不是 href="#section1"。浏览器只识别以 # 开头的 href 才触发原生锚点跳转。如果用了 JavaScript 拦截点击但没手动调用 scrollIntoView，也会表现为“点了没反应”。
确保目标元素有对应 id（不是 class），且值与 href 中的锚名完全一致（区分大小写、无空格）。
滚动时目录高亮错位？优先用 IntersectionObserver 替代 scroll 事件监听
scroll 事件高频触发 + 同步计算 getBoundingClientRect() 容易卡顿，且在页面缩放、字体加载完成前判断不准。用 IntersectionObserver 更可靠：
const observer = new IntersectionObserver(
(entries) => {
entries.forEach(entry => {
const id = entry.target.id;
const activeLink = document.querySelector(`nav a[href="#${id}"]`);
if (entry.isIntersecting) {
document.querySelectorAll('nav a').forEach(a => a.classList.remove('active'));
activeLink?.classList.add('active');
}
});
},
{ threshold: 0.1 }
);
关键点：
• threshold: 0.1 表示目标区域 10% 进入视口即触发，比 0.0 更早响应
• 不要给多个 section 设相同 id，否则 querySelector 只取第一个
• 如果页面顶部有固定导航栏，需在 scrollIntoView 时传入 { block: 'start', behavior: 'smooth', offsetTop: 60 } 类似的偏移——但注意 offsetTop 不是原生参数，得靠 scroll-margin-top CSS 实现
点击目录后滚动太生硬？用 scroll-margin-top 配合 scroll-behavior: smooth
纯 CSS 方案最轻量：
• 在 html 或 body 上加 scroll-behavior: smooth
• 给每个锚点目标元素（如 <section id="section1"></section>）加 scroll-margin-top: 60px，让滚动停止位置自动上移 60px，避开固定头部遮挡
• 不要对 <a href="#xxx"></a> 元素本身设 scroll-margin，它无效
• 若需兼容 IE，只能退回到 JS 的 element.scrollIntoView({ behavior: 'smooth' })，但要注意 Safari 旧版本不支持 behavior 参数
移动端点击目录没反应？检查 touch-action 和 pointer-events
某些 CSS 重置或 UI 框架会设置 touch-action: none 在容器上，导致触摸事件被拦截；或者用 pointer-events: none 误删了链接交互。快速排查：
• 用浏览器开发者工具选中目录链接，看 computed 样式里 pointer-events 是否为 auto
• 检查父级容器（比如侧边栏 wrapper）有没有 touch-action: none 或 pan-y 以外的限制
• 真机测试时，如果点击后焦点没变化，大概率是事件没触发，此时加个 console.log 在 click handler 里验证
IntersectionObserver 的 threshold 和 rootMargin 得反复试。别迷信“一配就灵”的数值。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
