使用 scrollIntoView 实现目录跳转需绑定唯一 ID、阻止默认行为并手动调用，配合 offset 处理固定头部遮挡，再用 IntersectionObserver 动态高亮当前章节。
使用 scrollIntoView 实现目录跳转，关键在于正确绑定元素引用、控制滚动行为和处理滚动偏移（如固定导航栏遮挡）。
确保目标元素有唯一且可访问的 ID
目录项的 href 必须指向页面内真实存在的元素 ID，且该 ID 在整个文档中唯一。推荐用语义化 ID，避免空格或特殊字符。
- ✅ 正确写法：
@#@#@#@#@#@#@#@#@#@0，对应 - ❌ 错误写法：
href="#about section"（含空格）、href=".about"（类选择器不被支持） - 注意：ID 区分大小写，
#SectionAbout和#sectionabout是不同目标
调用 scrollIntoView 并启用平滑滚动
默认点击锚点会触发原生跳转，若需自定义行为（如加偏移、统一动效），应阻止默认行为，手动调用 scrollIntoView。
- 为目录链接添加点击监听：
document.querySelectorAll('nav a[href^="#"]').forEach(...) - 在事件回调中获取目标元素：
const target = document.querySelector(e.target.getAttribute('href')) - 执行精准滚动：
target?.scrollIntoView({ behavior: 'smooth', block: 'start' }) -
block: 'start'确保元素顶部对齐视口顶部；也可用'center'居中显示
处理固定头部导致的内容被遮挡问题
当页面有 position: fixed 的导航栏时，滚动后目标元素常被遮盖。此时不能仅靠 scrollIntoView，需手动计算偏移。
- 获取导航栏高度：
const headerHeight = document.querySelector('header')?.offsetHeight || 0 - 改用
window.scrollTo配合getBoundingClientRect计算精确位置： const top = target.getBoundingClientRect().top + window.scrollY - headerHeightwindow.scrollTo({ top, behavior: 'smooth' })- 此方式绕过
scrollIntoView的自动对齐逻辑，完全可控
增强体验：滚动中高亮当前目录项
配合 IntersectionObserver 可实时识别可视区域内的章节，动态更新目录激活状态。
- 为每个内容区块创建 observer 实例，监听其是否进入视口
- 当某区块
isIntersecting === true时，找到对应目录项（如nav a[href="#section-x"]），添加active类 - 建议设置
threshold: 0.1，让元素约 10% 进入视口即触发，避免临界卡顿 - 可结合 CSS 过渡实现菜单项颜色/下划线的渐变效果
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
