锚点链接不滚动需检查href与目标id严格匹配（区分大小写、无空格特殊字符）；平滑滚动用scrollIntoView({behavior:'smooth'})并preventDefault()；滚动监听推荐IntersectionObserver；固定头部遮挡用scroll-margin-top。
锚点链接点击后不滚动？检查 href 值和目标元素 id 是否严格匹配
浏览器原生锚点跳转依赖 href 与目标元素 id 的精确一致（区分大小写、不可含空格或特殊字符）。常见错误是链接写成 href="#section1"，但目标元素却是 <div id="Section1"> 或 <div id="section-1"> —— 这会导致静默失败，无报错也无滚动。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具检查目标元素是否真有对应
id，且未被 JS 动态移除 - 避免在
id中使用中文、空格、下划线开头（部分旧浏览器不兼容），推荐纯小写字母 + 连字符，如faq-list - 若目标是
<h2 id="contact">，链接必须为<a href="#contact">，不能是<a href="contact">（缺#）或<a href="https://example.com#contact">（跨域时可能失效）
如何让滚动平滑且不破坏浏览器历史？用 scrollIntoView + { behavior: 'smooth' }
原生锚点跳转默认突兀，且每次点击都会新增 history 记录，影响返回逻辑。改用 JS 控制可兼顾体验与可控性。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给导航链接加
preventDefault()，再调用目标元素的scrollIntoView({ behavior: 'smooth', block: 'start' }) - 若需保留前进/后退能力，调用
history.replaceState()手动更新 URL hash，而非依赖原生跳转 -
block: 'start'确保元素顶部对齐视口，block: 'center'可能导致部分内容被 header 遮挡，需配合scroll-margin-top修正
滚动监听时频繁触发回调？用 IntersectionObserver 替代 scroll 事件
监听滚动位置来高亮当前导航项时，直接绑定 scroll 事件易造成性能问题，尤其在移动端或内容密集页。每像素滚动都可能触发重排重绘。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
IntersectionObserver监听各内容区块的可视状态，只在进入/离开视口时响应 - 设置
threshold: [0.1]表示当区块 10% 进入视口即触发，比监听绝对偏移量更鲁棒 - 注意：需为每个目标元素单独 observe，且 observer 实例应复用，不要在每次 scroll 中新建
固定头部遮挡锚点目标？用 scroll-margin-top 而非 JS 偏移计算
当页面有 position: fixed 的 header 时，原生锚点滚动会让目标元素顶到视口最上方，结果被 header 盖住。传统做法是 JS 计算 offset 并手动 scroll，但维护成本高、响应慢。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 直接在目标元素上设置 CSS：
scroll-margin-top: 64px（值等于 header 高度） - 该属性已被 Chrome 89+、Firefox 89+、Safari 15.4+ 原生支持，无需 polyfill
- 若需兼容旧版 Safari，可降级为在
scrollIntoView后手动调整window.scrollBy(0, -64)，但注意避免重复触发
scroll-margin-top 和 JS 滚动补偿混用时的竞态，这些边界情况往往只在真实滚动节奏里暴露。 
