滚动时自动高亮对应标签页需用JS监听scroll事件并节流，结合getBoundingClientRect精准判断可视区块，再通过data-active属性同步更新高亮状态；点击跳转则需preventDefault后调用scrollIntoView并手动更新URL hash。
滚动时自动高亮对应标签页
原生 HTML 没有“滚动监听并联动标签高亮”的内置机制，必须靠 JS 判断当前可视区域与各锚点区块的相对位置。核心逻辑是：获取每个 section 的 offsetTop 和高度，对比 window.scrollY，找出最匹配的那个。
常见错误现象：滚动后多个标签同时高亮、或始终不更新 —— 多半是没处理 offsetTop 的基准问题（比如父容器用了 transform 或 position: relative 但没设 top，导致 offsetTop 计算失真），或没考虑目标元素是否已渲染（如 Vue/React 中动态加载内容）。
- 务必用
getBoundingClientRect()替代单纯依赖offsetTop，它能规避 CSS 变换带来的偏移误差 - 监听
scroll事件时加throttle（例如 100ms 节流），否则在快速滚动时会频繁触发判断，影响性能 - 高亮逻辑建议用
data-active属性 + CSS 控制，而非直接操作className，便于样式解耦
点击标签页后滚动到对应锚点并保持 URL 同步
这其实是两个动作的组合：一是取消默认跳转（避免页面“硬跳”+ URL hash 改变后无法监听首次加载），二是手动滚动 + 更新 hash。直接写 href="#section2" 会触发浏览器原生行为，但无法控制滚动偏移、动画参数，且在 SPA 中常被路由拦截。
使用场景：文档页、长博客、API 参考手册等需要 SEO 友好 URL（带 hash）又要求视觉精准定位的页面。
- 给所有标签页链接加
event.preventDefault()，再调用element.scrollIntoView({ behavior: 'smooth', block: 'start' }) - 滚动完成后，用
history.replaceState(null, '', '#' + id)更新 URL，避免新增历史记录 - 必须同步处理
hashchange事件：页面加载时若带 hash（如直接访问/docs#api），需主动执行一次滚动 - 如果顶部有
position: sticky导航栏，记得给目标section加scroll-margin-top: 60px，否则标题会被遮住
为什么 scrollIntoView 在某些情况下滚不到目标位置
不是 JS 写错了，而是目标元素本身处于不可滚动状态。最典型的是：目标 section 被包裹在 display: none 的父容器里，或其 offsetParent === null（即未渲染、被隐藏、或父级设置了 visibility: hidden）。
性能影响：反复调用 scrollIntoView 对于大量 DOM 节点的页面会造成 layout thrashing，尤其在低端安卓机上明显卡顿。
- 先做存在性检查：
if (el && el.offsetParent !== null)再滚动 - 避免在
scroll回调中直接调用scrollIntoView—— 这会导致“滚动中再滚动”，触发浏览器强制重排 - 如果目标是懒加载图片或异步组件，需等
IntersectionObserver确认其进入视口后再激活锚点逻辑
SPA 中锚点失效的根本原因和绕过方式
Vue Router / React Router 默认把所有 #xxx 当作路由路径处理，@#@#@#@#@#@#@#@#@#@0 点击后不会触发原生滚动，而是被路由系统吞掉，甚至报 404。
容易被忽略的点：即使你写了 router-link，它的 to 属性默认解析为路径，to="https://www.php.cn/link/0785d90297c165f28daa21244e98a139" 不等于“跳到 id=faq 的元素”，而是尝试匹配路由规则。
- Vue：用
<router-link to="#"></router-link>，配合target="_self"强制脱离路由接管 - React：用
<a href="https://www.php.cn/link/0785d90297c165f28daa21244e98a139" onclick="{(e)"> { e.preventDefault(); scrollTo('faq'); }}></a> - 通用解法：监听
hashchange，在路由守卫（如 Vue 的beforeEach）中拦截以#开头的路径，改为执行滚动
滚动联动的本质是位置感知 + 状态同步，不是加个 class 就完事。真正难的从来不是“怎么写”，而是“什么时候该写、什么时候不该写”——比如首屏加载未完成时就监听 scroll，或者在 SSR 渲染阶段就执行 JS 判断，这些都会让逻辑跑偏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
