The task is to scroll to a particular element automatically. Below are the approaches:
Approach 1:
- Get the height of the element by .position().top property.
- Use .scrollTop() method to set the vertical position of the scrollbar equal to the calculated height of the particular element.
Example 1: This example uses the approach discussed above.
<!DOCTYPE HTML> <html>
<head>
<title>
How to scroll automatically to a particular element.
</title>
<style>
#GFG_DOWN {
margin-top: 370px;
}
</style>
<script src=
</script>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<p id="GFG_UP" style="font-size: 15px;
font-weight: bold;">
</p>
<button onclick="gfg_Run()">
Click Here
</button>
<p id="GFG_DOWN"
style="color:green;
font-size: 30px;
font-weight: bold;">
This is element.
</p>
<script>
var el_up = document.getElementById("GFG_UP");
var el_down = document.getElementById("GFG_DOWN");
el_up.innerHTML =
"Click on the button to scroll to the particular element."; function gfg_Run() {
$(window).scrollTop($('#GFG_DOWN').position().top);
}
</script>
</body>
</html>
|
Output:
-
Before clicking on the button:
-
After clicking on the button:
Approach 2:
- Get the height of the element by .offset().top property.
- Use .animate() method to animate to the element.
Example 2: This example uses the approach discussed above.
<!DOCTYPE HTML> <html>
<head>
<title>
How to scroll automatically to a particular element.
</title>
<style>
#GFG_DOWN {
margin-top: 400px;
}
</style>
<script src=
</script>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<p id="GFG_UP" style="font-size: 15px; font-weight: bold;">
</p>
<button onclick="gfg_Run()">
Click Here
</button>
<p id="GFG_DOWN" style="color:green;
font-size: 30px;
font-weight: bold;">
This is element.
</p>
<script>
var el_up = document.getElementById("GFG_UP");
var el_down = document.getElementById("GFG_DOWN");
el_up.innerHTML =
"Click on the button to scroll to the particular element."; function gfg_Run() {
$('html, body').animate({
scrollTop: $("#GFG_DOWN").offset().top
}, 500);
}
</script>
</body>
</html>
|
Output:
-
Before clicking on the button:
-
After clicking on the button:
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.