Open In App

How to redirect to a particular section of a page using HTML or jQuery?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

Redirection will take the user to the desired page or section of the website that the user wants to visit. We will do it using HTML and jQuery differently. Let us take a look at the practical implementations.

Table of Content

Method 1: Using HTML

One can use the anchor tag to redirect to a particular section on the same page. You need to add an “id attribute” to the section you want to show and use the same id in the href attribute with “#” in the anchor tag. So that, on clicking a particular link, you will be redirected to the section that has the same ID mentioned in the anchor tag.

Syntax:

//anchor tag
<a href="#home_section">home</a>
<section id="home_section">Information About Page</section>

Example: The below example will explain how to redirect to a particular section of a web page using HTML.

html




<!DOCTYPE html>
<html>
   
<head>
    <style>
    div{
    width :50%;
    height:400px;
    border : 1px solid black;
    margin: 2rem 0;
    }
    .link{
        text-decoration: none;
        text-shadow: none;
        font-size: 18px;
        padding: 20px;
        color: #000;
    }
    </style>
</head>
 
<body>
    <center>
    <h2>Welcome to GeeksforGeeks</h2>
    <p>
          This is the example of <i>Redirect
        to a particular section using HTML on same page</i>
    </p>
    <a class="link" href="#home"> Home </a>
    <a class="link" href="#about"> About Us </a>
    <a class="link" href="#contactUs"> Contact Us </a>
    <a class="link" href="#team"> Our Team </a>
    <br/>
    <div id="home">
        <h2>HOME</h2>
    </div>
    <div id="about">
        <h2>ABOUT US</h2>
    </div>
 
    <div id = "contactUs">
        <h2>CONTACT US</h2>
    </div>
    <div id="team">
        <h2>OUR TEAM</h2>
    </div>
</center>
</body>
   
</html>


Output:

redirectGIF

Method 2: Using JQuery

In this method, we will try to change the value of the href attribute of each anchor tag on click to the respective anchor using jQuery.

Syntax:

$(selector).click((e)=>{
e.target.href = respective_updating_value;
})

Example: The below example will illusttrate the use of jQuery to redirect to a particular section of the web page.

html




<!DOCTYPE html>
<html>
 
<head>
    <script src=
    </script>
    <script>
        $(document).ready(() => {
            $('#link1').click(function (e) {
                e.target.href = `#${e.target.dataset.link}`
            });
            $('#link2').click(function (e) {
                e.target.href = `#${e.target.dataset.link}`
            });
            $('#link3').click(function (e) {
                e.target.href = `#${e.target.dataset.link}`
            });
            $('#link4').click(function (e) {
                e.target.href = `#${e.target.dataset.link}`
            });
        })
    </script>
 
    <style>
        div {
            width: 50%;
            height: 400px;
            border: 1px solid black;
            margin: 2rem 0;
        }
 
        .link {
            text-decoration: none;
            text-shadow: none;
            font-size: 18px;
            padding: 20px;
            color: #000;
        }
    </style>
</head>
 
<body>
    <center>
        <h2>Welcome to GeeksforGeeks</h2>
        <p>
              This is the example of <i>Redirect
            to a particular section using Jouery
            on same page</i>
          </p>
        <a href="#" data-link="home"
           id="link1" class="link">
           Home
          </a>
        <a href="#" data-link="about"
           id="link2" class="link">
           About Us
          </a>
        <a href="#" data-link="contact"
           id="link3" class="link">
           Contact Us
          </a>
        <a href="#" data-link="team"
           id="link4" class="link">
           Our Team
          </a>
        <div>
            <h2 id="home">HOME</h2>
        </div>
        <div>
            <h2 id="about">ABOUT US</h2>
        </div>
 
        <div>
            <h2 id="contact">CONTACT US</h2>
        </div>
        <div>
            <h2 id="team">OUR TEAM</h2>
        </div>
    </center>
</body>
 
</html>


Output:

redirectGIF

jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”. You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.



Last Updated : 14 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads