应给目标元素设置scroll-margin-top: 80px（等于固定头部高度），浏览器自动上移滚动终点，无需JS计算，且随CSS响应式变化实时生效。
锚点跳转后目标被固定头部遮挡怎么办
这是单页滚动最常遇到的视觉错位——点击 #about 后，id="about" 元素顶部刚好卡在 position: fixed 导航栏下面，文字被盖住。不是 JS 没滚到，而是“滚到了但没露出来”。
别手动算导航栏高度再减去偏移，一旦响应式变化（比如移动端 header 折叠成 48px），window.scrollTo({ top: el.offsetTop - 60 }) 就失效。
- 给目标元素加
scroll-margin-top: 80px（数值等于 header 实际高度），浏览器会自动把滚动终点上移 80px - 该属性作用于目标元素本身，无需 JS 干预，且随 CSS 变化实时生效
- 如果目标是动态插入的（如 Vue
v-if切换后才渲染），需确保样式在元素挂载后生效，否则首次可能不触发
懒加载图片导致锚点滚动不准怎么解决
点击锚点时页面高度还没撑开，浏览器按旧高度计算滚动坐标；等图片加载完，目标元素已下移，结果“停在半路”。这不是 JS 错误，是布局抖动。
核心思路是：让图片/视频容器提前占位，避免加载前后高度突变。
立即学习“前端免费学习笔记（深入）”；
- 优先用原生
aspect-ratio：给img或video容器设aspect-ratio: 4 / 3，配合width: 100%和height: auto - 兼容旧浏览器可用 padding-hack：父容器设
position: relative+padding-top: 75%（对应 4:3），内部绝对定位内容 - 避免只靠
loading="lazy"就不管——它不解决占位问题，只是延迟加载
动态渲染内容（React/Vue）下锚点失效怎么处理
点击链接时，目标元素还没挂载到 DOM，document.getElementById("faq") 返回 null，浏览器静默失败，控制台也不报错。
原生锚点依赖 DOM 存在性，而框架组件的渲染时机不可控。
- 改用
scrollIntoView()主动触发，并包裹存在性检查：if (el && el.offsetParent !== null) el.scrollIntoView(...) - 监听
hashchange事件，在回调里延迟执行（setTimeout(..., 50)），给框架留出渲染时间 - 首次加载带 hash 的 URL（如
page.html#contact）时，必须手动调用一次滚动逻辑，否则不会触发
scroll-behavior: smooth 不生效的常见原因
写了 html { scroll-behavior: smooth; } 却还是硬跳，大概率是作用对象错了或被覆盖了。
这个 CSS 属性必须作用于实际滚动容器——页面级滚动容器是 html 元素，不是 body。
- 确认规则写在
html上，且没有被 reset.css 或其他样式覆盖（可用 DevTools 检查 computed style） - 检查系统偏好：
@media (prefers-reduced-motion: reduce)下该属性会被浏览器强制禁用，无法绕过 - 局部滚动容器（如聊天记录
div）要单独设scroll-behavior: smooth，且该容器必须有overflow: auto或scroll
真正麻烦的不是写法本身，而是这些细节相互耦合：一个懒加载图片没设 aspect-ratio，就可能让 scroll-margin-top 算错位置；一个 hashchange 监听没处理首次加载，SEO 分享链接就直接失效。每个点单独看都很简单，串起来才是真实场景。
