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

Question

I'm relatively new to HTML so maybe there's been a really blatant solution I've been missing. But I'm making a single-scroll website (with bootstrap) with a very basic navbar for people to jump to the section they want.

The navbar is currently an ul with a background image that appears from the right on hover.

I've followed various tutorials; created the anchor points and id tags, yet nothing seems to happen when I click on the navbar buttons. And I feel like I'm missing a fairly obvious solution here. I've shifted the position of the anchors around, and tried a few variants in both html and css I found online but none seemed to have solved it for me. I've tried it on other browsers, so it isn't a browser issue.

Here's the navbar code:

<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>

and here's a relevant part of one of the sections it's supposed to automatically scroll to:

<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 here's some images of the menu and an example of where I'd like the Chapter 1 button to scroll to

Frontpage

Navbar

Where I'd like it to scroll to

Thank you so much in advance!

Answer 1

It seems like, your link is not valid, you are adding menutext inside the href which should actually take the link or the id of the anchor element

<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>

It seems like menu text is a class name, which should be added in the class