Skip to content
html

How to make an HTML anchor link to jump to a specific section of the page?

Jul 21, 2022Abhishek EH2 Min Read
How to make an HTML anchor link to jump to a specific section of the page?

You might have used a tag to navigate to another page or another website. Have you ever wondered how to jump to a part of the page when the link is clicked? We will see how to do the same in this article.

Creating the page

First, let's create a page with a link and some content.

1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 <title>Document</title>
8 </head>
9 <body>
10 <a>Jump to section 2</a>
11 <h2>Section 1</h2>
12 <p>
13 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem voluptatem
14 quidem, nam fugiat sit distinctio rem sequi rerum iste voluptatibus
15 aliquid eveniet commodi in porro quam, soluta sed nemo esse!
16 </p>
17 <h2>Section 2</h2>
18 <p>
19 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestiae,
20 suscipit nostrum vero itaque quidem eaque deleniti iste magnam,
21 voluptatibus, blanditiis corrupti qui ad nulla facere dolorem architecto
22 omnis assumenda id.
23 </p>
24 </body>
25</html>

Let's say you want the page to be jumped to Section 2 when the user clicks on the link. You can add an id to the element where you need to jump. Say id="section-2" and add the href attribute with the value #section-2:

1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 <title>Document</title>
8 </head>
9 <body>
10 <a href="#section-2">Jump to section 2</a>
11 <h2>Section 1</h2>
12 <p>
13 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem voluptatem
14 quidem, nam fugiat sit distinctio rem sequi rerum iste voluptatibus
15 aliquid eveniet commodi in porro quam, soluta sed nemo esse!
16 </p>
17 <h2 id="section-2">Section 2</h2>
18 <p>
19 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestiae,
20 suscipit nostrum vero itaque quidem eaque deleniti iste magnam,
21 voluptatibus, blanditiis corrupti qui ad nulla facere dolorem architecto
22 omnis assumenda id.
23 </p>
24 </body>
25</html>

You can view the code and test it out here.

If you need to navigate to a section on another website, you can do so by appending the #<section_id> to the end of the URL as shown below.

https://3divyj.csb.app/#section-2

Do follow me on twitter where I post developer insights more often!

Leave a Comment

© 2024 CodingDeft.Com