Jumping to Chapters Using IDs in Anchor Tags

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.

TearSheet

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>
[/code]

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]