HTML Bookmark Links not Working on Wordpress

Question

I'm trying to create a table of content for my WordPress blog using bookmark links. I've been reading on it and I understand there are two steps to the process First, I have to assign an id to the place I want to link to in my text eg:

<h2 id="C4">Chapter 4</h2>

And then, on the index section, I have to create the actual link, like so:

<a href="#C4">Jump to Chapter 4</a>

I read online, however, that the foolproof way to go about it looks like this:

<h2 id="C1"></h2>
<h2>Chapter 1</h2>

This is because, and I quote "You may decide not to use text because often when you jump to a spot on your site, a toolbar or something else at the top might cover up the actual beginning spot you want your visitors to see."

I tried both ways and neither worked because once I'm trying the links out on the preview of my blog post, whenever I click on them they lead me to random places in the text.

Here are the details of my code:

Index
<a href="#C1">What is Habit Tracking?</a>
<a href="#C2">How Does Habit Tracking Work?</a>
<a href="#C3">Which Habits Should You Track?</a>
<a href="#C4">Which Habit Tracking Tool Should You Use?</a>
<a href="#C5">A Simple Google Sheets Habit Tracker</a>
<a href="#C6">Does Habit Tracking Work?</a>
<a href="#C7">The Habit of Tracking Habits</a>

&nbsp;
<h2 id="C1"></h2>
<h2>What is Habit Tracking?</h2>
Text... 

&nbsp;
<h2 id="C2"></h2>
<h2>How Does Habit Tracking Work?</h2>
Text...

&nbsp;
<h2 id="C3"></h2>
<h2>Which Habits Should You Track?</h2>
Text....

And so on until I reach the seventh and last subtitle.

Please, if anyone can help me work this out I would greatly appreciate it!

Answer 1

There are two things, First: in order you to see effect, you need to have text more than your browser window height so you can see it moving, your code seems fine so it should work. just add dummy content and see. you can get dummy content from here https://www.lipsum.com/

Second when browser scroll to an id it scroll to that id leaving no top margin which makes bad UX Sometimes, to fix that just add top padding to your <h2> . like

  h2{
    padding-top:100px;
   }

and it should look good. i created using your code here. https://codepen.io/jiteshdhamaiya/pen/vYGGrZg

adjust padding accordingly.