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 sections of a web page on the fly without a new page request. Jump links are perfect for linking to different elements of an existing web page without leaving the page.

Create a div with an ID

First, we'll need to create a div element and give it a unique ID of "services":

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

When assigning ID's to page elements, make sure each ID is unique.

Create the Jump Link

Now, we'll create a jump link with an anchor a tag. The difference with this link versus a standard link is it will be preceded by the number sign #. This tells the browser that the user will stay within the same web page and will scroll to the element with the ID we assigned above.

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

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

This will also enable the ability to auto-scroll to different sections of the page from other pages:

<a href="page-2.html#services">Go to Services</a>

Add Smooth Scroll

By default, jump links will scroll automatically to the element's location without an animation. From a user's perspective, this could be a bit confusing. We can scroll to the element using an animation by adding this CSS rule to the html selector:

html {
	scroll-behavior: smooth;
}

There are also a few handy ways you can enable smooth scrolling with JavaScript.

Conclusion

Jump links are insanely simple to work with and beneficial in cases where you only want to scroll to a specific section of the current web page instead of loading a new page.