Bootstrap 5 fixed-top导航栏内部锚点链接滚动定位异常

问题核心：fixed-top导航栏脱离文档流，浏览器默认锚点定位会将目标元素顶部对齐视口顶部，导致被导航栏遮挡。直接给body/main/section加margin-top或padding-top无法解决锚点跳转的定位偏移问题，以下是三种有效解决方案：

方法1：利用Bootstrap ScrollSpy内置偏移 #

页面已启用滚动监听（data-bs-spy="scroll"），只需给<body>添加data-bs-offset属性，值设为导航栏高度（通常70px左右，可根据实际导航栏高度调整）：

<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="70">

该方法让Bootstrap在处理滚动监听和锚点跳转时自动偏移对应距离，同时同步ScrollSpy的激活状态。

方法2：纯CSS解决（scroll-margin-top） #

给所有section设置scroll-margin-top，值等于导航栏高度，浏览器锚点定位时会自动预留顶部空间：

section {
  scroll-margin-top: 70px;
}

无需依赖Bootstrap JS，兼容性良好，适合不需要滚动监听的场景。

方法3：锚点占位法（兼容旧浏览器） #

针对不支持scroll-margin-top的旧浏览器，可在每个section顶部添加隐藏占位元素，将锚点ID移至该元素：

<section class="vh-100 text-center fs-2 text-white bg-danger">
  <div id="section-1" class="d-block position-relative" style="top: -70px; visibility: hidden;"></div>
  Section 1
</section>

占位元素通过负偏移让section内容自然显示在导航栏下方，不影响页面布局。

修改后的完整示例（方法1） #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="70">
    <nav class="navbar navbar-expand-lg bg-info fixed-top">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Bootstrap-Navbar</a>
            <button
                class="navbar-toggler"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent"
                aria-expanded="false"
                aria-label="Toggle navigation"
            >
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link" href="#section-1">Link 1</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#section-2">Link 2</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#section-3">Link 3</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#section-4">Link 4</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <main class="pt-5">
        <section id="section-1" class="vh-100 text-center fs-2 text-white bg-danger">
            Section 1
        </section>
        <section id="section-2" class="vh-100 text-center fs-2 text-white bg-warning">
            Section 2
        </section>
        <section id="section-3" class="vh-100 text-center p-5 fs-2 text-white bg-success">
            Section 3
        </section>
        <section id="section-4" class="vh-100 text-center p-5 fs-2 text-white bg-info">
            Section 4
        </section>
    </main>
    <script type="module" src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Paul Tomblin