Jumping to Chapters Using IDs in Anchor Tags

Chapters - Anchor Links - Time
A screenshot of a Time article showing the Chapters in anchor links.

Here’s what I particularly like about Time articles – the Chapters are neatly lined up on top in anchor links. In case you want to jump from one part of an article to another.


The simplest way to implement this is to use the id of the element and put that into the href attribute of your a element.

For example:

[code lang=”html” title=”HTML”]
<!– Activating this link will jump to Chapter Title 1 –>
<a href="#chapter-title-1">Chapter Title 1</a>

<!– Chapter Title 1 –>
<h2 id="chapter-title-1">Chapter Title 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

You can see a demo here:

[codepen_embed height=”424″ theme_id=”1820″ slug_hash=”heoAl” default_tab=”result”]See the Pen heoAl by Brian Dys Sahagun (@BrianSahagun) on CodePen.[/codepen_embed]


Leave a Reply

Your email address will not be published. Required fields are marked *