Bootstrap 5 Scrollspy 从 url 获取 id 并滚动到具有 id 的特定部分答案

【问题标题】：Bootstrap 5 Scrollspy taking id from url and scroll to the specific section with the idBootstrap 5 Scrollspy 从 url 获取 id 并滚动到具有 id 的特定部分
【发布时间】：2022-01-14 17:06:07
【问题描述】：

我正在使用 bootstrap 5 Scrollspy 导航到我主页的不同部分。当我单击导航链接（例如，项目）时，它工作正常。 url 变为：https://example.com/#projects 并滚动到该部分。

HTML：

<body data-bs-spy="scroll" data-bs-target="#navbar-main" data-bs-offset="240">
    <ul class="nav navbar-nav ms-md-auto mb-2 mb-lg-0 fixed-top">
        <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#about">About</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#services">Services</a>
        </li>
        <li class="nav-item">
             <a class="nav-link" href="#projects">Projects</a>
         </li>
                                    
     </ul>
     <main>
        <section id="about"> ...</section>
        <section id="services"> ...</section>
        <section id="projects"> ...</section>
    </main>

</body>

但是当我在地址栏中刷新或使用相同的 URL 并加载页面时，它不会滚动到该部分。那么如何实现从 url 中获取 #id 并滚动到该部分的行为呢？

[注意：我使用的是body{overflow-y: hidden}，当用户第一次加载页面然后重置回overflow: auto时，我会显示一个启动屏幕，比如 5 秒钟]

【问题讨论】：

标签： bootstrap-5 scrollto scrollspy

【解决方案1】：

您的<ul> 上缺少与data-bs-target="#navbar-main" 对应的id="navbar-main"。

【讨论】：