Table of Contents
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 voluptatem14 quidem, nam fugiat sit distinctio rem sequi rerum iste voluptatibus15 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 architecto22 omnis assumenda id.23 </p>24 </body>25</html>
Adding id and link to it
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 voluptatem14 quidem, nam fugiat sit distinctio rem sequi rerum iste voluptatibus15 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 architecto22 omnis assumenda id.23 </p>24 </body>25</html>
You can view the code and test it out here.
Navigating to a section on another website
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