February 7, 2019
How to Implement HTML Page Jumps on Your Website
How to Implement a Page JumpSource: 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
- 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
- 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
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 or issue of The Burgundy Zine? Head on over to the submissions page!
For all other inquiries, please fulfill a contact form.
This entry was posted in 2019, Winter 2019, February 2019, Blog, How To, Blog, Science, Technology, Computer Programming, HTML and tagged in blog, blogs, burgundy bug, computer programming, dev, developer, development, diy, february, february 2019, guide, guides, how to, How to Implement HTML Page Jumps on Your Website, html, html guide, html page jump, html page jumps, html tutorial, navigation, page, page jumps, pages, programming, programming guide, programming tutorial, tutorial, web design, web dev, web development, website, winter 2019.
The bug behind the blog… A cynical optimist, burgundy bug is the editor, graphic designer, and main photographer for The Burgundy Zine. Curiosity may have killed the cat, but it's got nothing on the bug. Her work embodies a wide variety of topics including: ecology, biology, neurology, cannabis, reviews, fashion, entertainment, and politics. If you are interested in learning more about the bug behind the blog or working with her, please visit our contact page.View more posts from this author