How to Implement HTML Page Jumps on Your Website

By: burgundy bug

• 

How to Implement a Page Jump

Source: The Burgundy Zine

Page jumps use jump links – also known as anchor links – to bring visitors to different parts of the page, rather than directing them to different pages on your website.

Table of Contents

• A Bit of Context (Preface)
• When to Use a Page Jump
• How to Implement a Page Jump
  • Heading Page Jumps
  • Paragraph Page Jumps
  • DIV Page Jumps
• Give it a Try

A Bit of Context…

Page jumps create a more user-friendly browsing experience on your web page. They allow users to easily navigate to different headers or subsections of a page. This is incredibly convenient. Page jumps also pathe the way for you to further organize your content.

Furthermore, page jumps eliminate the frustration of a user losing their place on a page, as the jump link encourages them to quickly navigate back to where they were.

Page Jumps are supported in most browsers on all devices, including Google Chrome, Firefox, Safari, as well as Internet Explorer 10.

When to Use a Page Jump

You could use a page jump just about anywhere, but it makes the most sense to implement them on pages with a lot of content such as:

• Longer articles with multiple subsections
• Tutorials
• Important Documentation
• Pages with multiple subsections, such as the “about” page or your website’s directory

Of course, there are other situations in which a page jump would be applicable.

How to Implement a Page Jump

It is incredibly easy to implement a page jump, regardless of your website’s UI. They are even supported by WordPress.

All it takes to pull a page jump off is some very simple HTML.

In the element’s tag, add a unique id. For example:

Heading Page Jumps

Implementing a page jump to a heading – arguably the most common type of page jump – will look something like this:

<h1 id="unique_id">HEADER</h1>

<h2 id="unique_id2">HEADER 2</h2>

<h3 id="unique_id3">HEADER 3</h3>

<h4 id="unique_id4">HEADER 4</h4>

<h5 id="unique_id5">HEADER 5</h5>

<h6 id="unique_id6">HEADER 6</h6>

Paragraph Page Jumps

<p id="unique_p_id">THIS IS A PARAGRAPH, OR WHATEVER</p>

DIV Page Jumps

An HTML <div> is a “div”ision or subsection of a page. They are incredibly versatile with a ton of uses, features, and customization. Implementing a page jump to a div will look something like this:

<div id="unique_div_id">THIS IS A DIVISION OR SUBSECTION OF THE PAGE</div>

Of course, the id and content between the tags is entirely at your discretion.

After you’ve given the element you would like the user to have the option to jump to an id, all you have to do is add a link to it, which will look something like this:

<a href="#unique_id">THIS TEXT LINKS TO HEADING ONE FROM THE HEADINGS PAGE JUMP EXAMPLE</a>

<a href="#unique_div_id">THIS TEXT LINKS TO THE DIV FROM THE DIV PAGE JUMP EXAMPLE</a>

Give it a Try

You can give page jumps a try yourself by clicking here to navigate back to the Table of Contents.

From there, feel free to click any link you would like to navigate to the various subsections of this post.

---

Interested in having content featured in an upcoming blog post or issue of The Burgundy Zine? Head on over to the submissions page!

For all other inquiries, please fulfill a contact form.