Skip to content
Related Articles

Related Articles

How to redirect to a particular section of a page using HTML or jQuery?
  • Last Updated : 03 Mar, 2021

Method 1: Using HTML:

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

Syntax:

//anchor tag
<a href="#home_section">home</a>

<section id="home_section">Information About Page</section>

Example: When user click on “Contact Us” link, he will be redirect to “Contact Us section” on the same page.




<!DOCTYPE html>
<html>
   <head>
     <style>
     div{
       width :100%;
       height:400px;
       border : 1px solid black;
      }
    </style>
   </head>
  
   <body>
      <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 href="#contactUs"> Contact Us </a>
      <br/></br>
      <div>
        <h2>Home section</h2></h>
      </div>
      <div>
        <h2>About Us section</h2>
      </div>
  
      <div id = "contactUs">
        <h2>Contact Us section </h2>
      </div>
      <div>
        <h2>Team Section</h2>
      </div>
   </body>
</html>

Output:
Full window size view:



When user click on “Contact Us” link, user will be redirect to “contact us section”.
Full window size view:

Method 2 : Using JQuery:

The scrollTop() method sets or returns the vertical scrollbar position for the selected elements.

Note: When the scrollbar is on the top, the position is 0.

Syntax:

$(selector).scrollTop(position)

To redirect to particular section using JQuery:

Syntax:

<a href="#" id="home">home</a>

$('#home').click(function(){
$(document).scrollTop(100) // any value you need
});

Example: When user click on “Contact Us” link  present at bottom of page, he will be redirect to ” Home section” on the same page.




<!DOCTYPE html>
<html>
   <head>
     <script>
           $("#contactUs").click(function(){
           // any value you need
           $(document).scrollTop(600) 
           });
     </script>
  
     <style>
     div{
       width :100%;
       height:400px;
       border : 1px solid black;
      }
    </style>
   </head>
  
   <body>
      <h2>Welcome to GeeksforGeeks</h2>
      <p>This is the example of <i>Redirect 
to a particular section using Jouery
 on same page</i> </p>
      <div>
        <h2>Home section</h2></h>
      </div>
      <div>
        <h2>About Us section</h2>
      </div>
  
      <div>
        <h2>Contact Us section </h2>
      </div>
      <div>
        <h2>Team Section</h2>
      </div>
      <br>
        <a href="#" id="contactUs"> Contact Us </a>
  
   </body>
</html>

Output: Contact Us link is at bottom of page:
Full window size view:

When user click on Contact Us link, user will be redirected to top 600 px to “Home section”.
Full window size view:

My Personal Notes arrow_drop_up
Recommended Articles
Page :