Bootstrap导航栏链接点击平滑滚动到锚点

点击导航链接时，页面直接跳转缺乏过渡效果，影响用户体验。许多开发者误以为是Bootstrap的问题，实际可以通过正确方法实现平滑滚动。本文将介绍如何让Bootstrap导航栏链接点击后平滑滚动到对应锚点位置。

链接点击后生硬跳转？检查是否阻止默认行为

问题根源在于未调用 event.preventDefault()。浏览器遇到 href="#about" 时会执行原生锚点跳转：URL立即变化，页面闪动且无动画。后续JS执行的 scrollIntoView 或 scrollTo 无法消除已发生的“卡顿”。

• 必须在所有 a[href^="#"] 的点击事件中添加 event.preventDefault()。
• 不要仅关注导航栏的 nav-link，页脚“回到顶部”等链接也需覆盖。
• 若使用Vue/React等框架，href 可能不触发原生跳转，此时CSS scroll-behavior: smooth 无效，必须通过JS主动控制滚动。

scrollIntoView与scrollTo如何选择？取决于目标存在性

两种方法适用场景不同。scrollIntoView 要求目标元素真实存在且有明确 id；scrollTo 更适合无DOM目标的场景（如返回顶部）。

• 跳转到 #about 区块：使用 document.querySelector("#about").scrollIntoView({ behavior: "smooth", block: "start" })，简洁高效。
• 返回顶部：使用 window.scrollTo({ top: 0, behavior: "smooth" })。避免使用 href="#top"，否则页面先闪跳再滚动，体验差。
• 若目标元素动态插入（如SPA页面切换后出现），先加 if (el) { el.scrollIntoView(...) } 判断，防止控制台报错 Cannot read property 'scrollIntoView' of null。

固定导航栏遮挡内容？偏移量不可写死

导航栏高度并非固定：移动端可能折叠，PC端可能固定80px。硬编码偏移量（如 -80）会导致部分设备上内容被遮盖或留白过多。

• 推荐动态获取：const navbar = document.querySelector(".fixed-top"); const offset = navbar navbar.offsetHeight : 0;，确保各屏幕尺寸准确。
• 计算目标位置时，使用 target.offsetTop - offset 减去动态偏移。
• 若使用 scrollIntoView（不支持偏移量），可改用 scrollTo 手动计算：window.scrollTo({ top: target.offsetTop - offset, behavior: "smooth" })。
• CSS scroll-behavior: smooth 无法配合偏移量补偿，纯CSS方案不可行。

IE或旧版Safari不支持behavior: smooth？无需额外降级

IE已过时，不支持 scrollIntoView 及 behavior 参数。需要关注的是Safari 15.3及之前版本。

• 简单项目可直接引入 smoothscroll-polyfill 库（约2KB），自动为 scrollTo 和 scrollIntoView 补充平滑滚动，业务代码无需修改。
• 若不引入polyfill，可尝试 window.scrollTo({ top: y }) + CSS scroll-behavior: smooth 组合，但后者仅对原生锚点跳转生效，仍需 preventDefault 配合。
• 不建议自行编写easing动画函数。现代浏览器原生平滑滚动已足够稳定，手动实现易产生兼容性和性能问题。

最后需要注意：实际滚动触发前，DOM必须完全就绪。若目标区块异步加载或条件渲染（如点击tab后才出现的section），querySelector 可能返回 null，导致滚动静默失败。这是该方案中常被忽略的隐患。