fixed-top导航栏遮挡锚点的本质是position:fixed使nav脱离文档流，浏览器按原始offsetTop计算滚动位置；推荐用CSS :target或scroll-margin-top实现零JS偏移，JS方案仅适用于navbar高度动态变化的场景。
fixed-top 导航栏导致锚点被遮挡的本质原因
不是 bootstrap 有 bug，而是 position: fixed 让 <nav> 脱离文档流，浏览器滚动到锚点时，仍按原始文档位置计算 —— 即把 <section id="about"> 的 offsettop 当作从页面顶部起算，结果内容顶到了固定导航栏底下。
关键点：锚点本身没“偏移”，是视觉上被盖住了；所有方案都是在“骗”浏览器多往下滚一段距离，刚好等于导航栏高度。
用 CSS :target 实现零 JS 偏移（推荐首选）
现代浏览器都支持，简洁、无 JS 依赖、响应式友好。前提是每个锚点目标是块级元素（如 <section>），且能加 class 或直接选中。
- 给所有锚点容器统一加一个类，比如
class="scroll-target" - 在 CSS 中写：
scroll-target:target { padding-top: 125px; margin-top: -125px; }（125px替换为你实际的 navbar 高度） - 必须同时设
padding-top和margin-top：前者撑开空间避免文字上移，后者抵消自身高度防止页面跳动 - 如果 navbar 高度响应式变化（比如移动端缩为
56px），可用媒体查询覆盖：@media (max-width: 768px) { .scroll-target:target { padding-top: 56px; margin-top: -56px; } }
用 scroll-margin-top 一劳永逸（CSS 新标准）
这是目前最干净的解法，原生支持滚动锚点偏移，无需改 HTML 结构或 JS 干预，但注意兼容性。
- 直接给锚点元素加样式：
section[id] { scroll-margin-top: 125px; }（125px同样按你 navbar 实际高度填） - 优点：语义清晰、不影响布局流、自动适配
smooth滚动 - 兼容性注意：Chrome 89+、Firefox 89+、Safari 15.4+ 支持；IE 完全不支持，Edge 105+ 可用
- 若需兼容旧 Safari（如 iOS 15.2 以下），可 fallback 到
:target方案
JS 方案慎用：只在必须动态计算时才上
除非你的 navbar 高度随滚动/折叠实时变化（比如带下拉菜单收缩、移动端汉堡菜单展开后变高），否则没必要引入 JS。一旦用了，就得处理 hashchange、popstate、初始加载、SPA 路由等边界情况。
- 简单场景可这样写（jQuery）：
$(document).on('click', 'a[href^="#"]', function(e) { const href = this.getAttribute('href'); if (href === '#') return; const $target = $(href); if ($target.length) { e.preventDefault(); $('html, body').animate({ scrollTop: $target.offset().top - 125 }, 300); } }); - 纯 JS 更轻量，但要注意
offsetTop在父容器有transform时不准，建议用getBoundingClientRect().top + window.scrollY - 别漏掉初始加载时的 hash 处理：
if (location.hash) scrollToHash() - 最大坑：SPA（如 Vue Router）里，
hashchange不触发，得监听路由更新而非 DOM 事件
真正容易被忽略的是 navbar 高度的“动态性”——自定义高度、折叠菜单、移动端视口缩放、甚至字体加载完成后的重排，都会让写死的 125px 失效。优先用 scroll-margin-top，其次 :target，JS 应该是最后的选择，而不是默认动作。
