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:
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.