How to scroll window using jQuery ?
Last Updated :
12 Sep, 2019
Given a HTML document and the task is to scroll the document with the help of jQuery. There are two methods to scroll the HTML document window which are discussed below:
Approach:
- Select the document by using selector.
- Use either of the scrollTop() or scrollTo() method to move the document to that position.
Example 1: This example using the scrollTop() method to scroll the HTML document.
<!DOCTYPE HTML>
<html>
<head>
<title>
How to scroll window using jQuery ?
</title>
<script src=
</script>
<style>
#body {
height: 1000px;
}
</style>
</head>
<body style = "text-align:center;" id = "body">
<h1 id = "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 =
"font-size: 23px; font-weight: bold; color: green; ">
</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"
+ " the document.";
function gfg_Run() {
$(document).scrollTop(100);
el_down.innerHTML = "Position has been set.";
}
</script>
</body>
</html>
|
Output:
- Before clicking on the button:
- After clicking on the button:
Example 2: This example using the scrollTo() method to scroll the HTML document.
<!DOCTYPE HTML>
<html>
<head>
<title>
How to scroll window using jQuery ?
</title>
<script src=
</script>
<style>
#body {
height: 1000px;
}
</style>
</head>
<body style = "text-align:center;" id = "body">
<h1 id = "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 =
"font-size: 23px; font-weight: bold; color: green; ">
</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"
+ " the document.";
function gfg_Run() {
window.scrollTo(0, 100);
el_down.innerHTML = "Position has been set.";
}
</script>
</body>
</html>
|
Output:
- Before clicking on the button:
- After clicking on the button:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...