同一页面中的 HTML 锚点不起作用

Question

我对 HTML 比较陌生，所以也许我一直缺少一个非常明显的解决方案。 但是我正在制作一个带有非常基本的导航栏的单滚动网站（带有引导程序），供人们跳转到他们想要的部分。

导航栏目前是一个 ul，背景图像在悬停时从右侧出现。

我遵循了各种教程； 创建了锚点和 id 标签，但当我点击导航栏按钮时似乎没有任何反应。 我觉得我在这里错过了一个相当明显的解决方案。 我已经改变了锚点的位置，并在网上找到的 html 和 css 中尝试了一些变体，但似乎没有一个为我解决了这个问题。 我已经在其他浏览器上试过了，所以这不是浏览器的问题。

这是导航栏代码：

<div class="container-fluid menuholder">
    <div class="menu">
    <ul class="nobull menutext">
            <li><a href="#prologue menutext">Prologue<br><font weight="bold" color="white"><strong>The Beginning</strong></font></a></li>
            <li><a href="#chap1 menutext"><br>Chapter 1<br><font color="white"><strong>The Storyteller</strong></font></a></li>
            <li><a href="#chap2 menutext"><br>Chapter 2<br><font color="white"><strong>The Big Idea</strong></font></a></li>
            <li><a href="#epilogue menutext"><br>Epilogue<br><font color="white"><strong>It Begins</strong></font></a></li>
    </ul>
    </div>
</div>

这是它应该自动滚动到的部分之一的相关部分：

<div class = "container">
    <div class="row">
        <div class ="chap1title col-md-3" id="chap1">
            <h3>Chapter 1:</h3><br><h2>The Storyteller</h2>
        </div>
    </div>
</div>

Aaaand 这是菜单的一些图像以及我希望第 1 章按钮滚动到的示例

首页

导航栏

我希望它滚动到的位置

非常感谢您！

Answer 1

看起来，您的链接无效，您在 href 中添加了菜单文本，它实际上应该采用链接或锚元素的 id

<ul class="nobull menutext">
            <li><a href="#prologue">Prologue<br><font weight="bold" color="white"><strong>The Beginning</strong></font></a></li>
            <li><a href="#chap1"><br>Chapter 1<br><font color="white"><strong>The Storyteller</strong></font></a></li>
            <li><a href="#chap2"><br>Chapter 2<br><font color="white"><strong>The Big Idea</strong></font></a></li>
            <li><a href="#epilogue"><br>Epilogue<br><font color="white"><strong>It Begins</strong></font></a></li>
    </ul>

似乎菜单文本是一个类名，应该在类中添加