Jump to another section

To create HTML anchor links that jump to another section of the page, you have to assign CSS ID for each section/element. And you have to use the ID followed by a “#” (hash) as the link. See the link pattern below.

<a href="#section-2">Go to next section</a>

Note that each CSS ID should be unique and you can use the ID once on a page.

However, you can use an ID multiple times on the same page when you don’t need linking behavior and when you need it for styling. But it’s a good practice to use a CSS class name when you need the same style on multiple elements. For more details about CSS ID & class, see this post.

But if you use an ID multiple times on the same page, it will redirect you to the first item after clicking.

HTML anchor link demo

Section 1

Click on the link below to see the final output.

Go to next section ▿

Section 2

Click on the link below to see the output.

▵ Go back to previous section

For the above demo, I have the following code.

HTML

<div class="container">
  <div id="section-1">
    <h2>Section 1</h2>
    <p>Click on the link below to see the final output.</p>
    <a href="#section-2">Go to next section ▿</a>
  </div>
  <div id="section-2">
    <h2>Section 2</h2>
    <p>Click on the link below to see the output.</p>
    <a href="#section-1">▵ Go back to previous section</a>
  </div>
</div>

As you see in the above HTML, I have two unique CSS IDs (section-1 & section-2). And I am linking those sections followed by a “#” symbol.

Though CSS is not important in this context, however, some of you may be interested.

CSS

html {
  scroll-behavior: smooth;
}
.container {
  background-color: #D4FFD1;
  max-width: 900px;
  margin: 0 auto;
  padding: 30px 15px;
}
.container #section-1, .container #section-2 {
  padding: 90px 15px 220px;
  background-color: #34A853;
}
.container #section-1 a, .container #section-2 a {
  padding: 9px 20px;
  background-color: rgba(255, 255, 255, 0.75);
  color: #1F4662;
  text-decoration: none;
  -webkit-transition: background-color 0.8s ease;
  transition: background-color 0.8s ease;
  border-radius: 1px;
  border-top: 1px solid #FFFFFF;
  border-bottom: 1px solid #FFFFFF;
  display: inline-block;
}
.container #section-1 a:hover, .container #section-2 a:hover {
  background-color: #4285F4;
  color: #FFFFFF;
}
.container #section-2 {
  background-color: #EA4335;
}

How to implement a smooth scrolling effect when you click the anchor links

In my demo, you saw that it scrolls to the section smoothly instead of jumping. If you want the same scrolling effect, make sure you have the following line of CSS.

html {scroll-behavior: smooth;}

How to link back to a specific section from a different page?

In some situations, you may need to reference a section of a webpage from another page. If you want the visitors to jump to a specific section, you can reference the anchor followed by the page URL.

Let me give you an example that will make more sense.

https://your-domain.com/about-us/#section-2

This is how you can link back to a specific section from other pages.

As a real example, if you click this link, it will redirect to a specific section of another webpage.

Learn more about HTML links

Conclusion

Now you know how to create HTML anchor links that redirect/jump to another section/element on the same page. If you have any questions, let me know.