1

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!

Ana Maria Lugo
  • 11
  • 1
  • Hi Ana Maria, It may well be working. Either make your browser window smaller or add a lot of extra text at the bottom of the page to test. Browers don't jump to the id, they jump to where the bottom of the page is still at the bottom of the screen but your 'id' is now visible. If you have a lot of extra text at the bottom, the jump to 'id' looks more accurate. If the whole page is already visible in the browser window, there will be no apparent jump at all – anmari Aug 16 '20 at 01:15
  • There is nothing wrong with the code you have included so the problem must be with something else that you haven’t shown us. Please see how to create a [minimal,reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) so that we can see all the relevant code and recreate the problem, so we be able to help. – FluffyKitten Aug 16 '20 at 11:53

1 Answers1

0

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.

Jitesh Dhamaniya
  • 1,326
  • 2
  • 8
  • 17
  • Thanks for taking the time to answer. I do have quite a bit of text... I did not add it to the question, but there is a lot of text before the index and a lot of text after each heading so I do see my browser window moving when I click the links, but they do not move to the correct place... As for the padding, would that make the links work smoothly? Thanks so much again! – Ana Maria Lugo Aug 16 '20 at 03:56
  • I am not sure when you say they not moving correct place what does that mean, because as per current html it should only move to that id, no glitch. for moving with animation i have created this code for you, i have added a nav wrapper to all links. https://codepen.io/jiteshdhamaniya/pen/vYGGrZg Please notice you need to add jQuery to your page in order this to work. i believe you handy with it. or you can follow this https://www.w3schools.com/jquery/jquery_get_started.asp – Jitesh Dhamaniya Aug 16 '20 at 04:48
  • Also see https://stackoverflow.com/a/60975588/440290 for handy fairly widely supported related tip – anmari Aug 18 '20 at 01:32