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



我对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 章按钮滚动到的位置的示例

头版

导航栏

我希望它滚动到哪里

提前非常感谢!

看起来,您的链接无效,您正在 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>

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

最新更新