Use Jump Links to Scroll to Specific Parts of a Page

In this tutorial, you'll learn how to create Jump links in HTML, allowing you to jump to specific parts of a web page without a brand new page request. Jump links are the perfect solution for linking to different elements of an existing web page without leaving the page.

Create a Page Element with an ID

First, we'll need to create an element and give it a unique ID. This will allow us to create our jump link to that element within the same web page.

In this example, we'll create a div element with an ID of services:

<div id="services">
	<h2>Our Services</h2>
	<p>Content here</p>
</div>

Make sure that each element ID on the web page are unique throughout your web page. Only one element can have an ID of services, which you should not use again on the same web page.

Creating the Jump Link

Now, we'll create the jump link using HTML's a anchor tag, similar to how we would create a link to another web page. The difference here is the link will be preceded by the number sign #. This tells the browser that the user will stay within the same web page, just scrolling to a specific element with the specified ID.

For example, if we wanted to scroll to our services element that we created, we could do so like this:

<a href="#services">Scroll to Services</a>

Adding Smooth Scroll

By default, jump links will scroll automatically to the specified element's location without an animation. If you would like to animate the scroll to the specified element, you can do so by adding this CSS rule to the html selector:

html {
	scroll-behavior: smooth;
}

Conclusion

Jump links are insanely simple to work with and beneficial in cases where you only want to automatically scroll to a specific section of the current web page instead of loading a new one with HTML's built-in anchor tag.