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.
Created: April 19, 2022
Comments
There are no comments yet. Start the conversation!