Updated March 21, 2023
Introduction to jQuery scrollTop()
scrollTop() method in jQuery is an inbuilt method that is used to get or set the vertical scrollbar position of the first matched element. It works for both visible and non – visible elements. The vertical scrollbar position is calculated as the number of pixels above the scrollable area. If the scrollbar is at the top, that means, the number of pixels is “0”.When this method is used to get the scrollbar position for the specified element, the current vertical position of the first matched element in the set of matched elements is returned. When this method is used to set the scrollbar position, the vertical position of every matched element is set.
Syntax:
- To get the vertical scrollbar position.
$(selector).scrollTop()This method accepts no parameter.
- To set the vertical scrollbar position.
$(selector).scrollTop(position)Where the position is the parameter that specifies the position to set the vertical scrollbar to.
Implementation of jQuery scrollTop() Method
Given below are the examples of jQuery scrollTop() Method
Example #1
How scrollTop() method in jQuery actually works.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
alert($("div").scrollTop() + " px");
});
});
</script>
</head>
<body>
<div
style="border:1px solid black; background-
color:rgb(255, 238, 238);width:200px;height:100px;overflow:auto"
>
This example explains the effect of jQuery scrollTop() method. This inbuilt method gers or sets the verticall scrollbar position of a specified element. The position refers to the number of pixels above the scrollable area.
</div>
<br />
<p style="color:olivedrab">
Scroll and click on button to see the result.
</p>
<button style="color:maroon">
<b>Click to get the vertical scrollbar position</b>
</button>
</body>
</html>Output:
Initially, a vertical scrollbar is at the very top of the div.
On clicking the button, an alert box pops up displaying a vertical scrollbar position: 0px.
This means the number of pixels above the scrollable area is 0.
Now, the scrollbar is scrolled downwards gradually somewhere near the middle of the div.
Again, on clicking the button returns the scrollbar position value as 40px.
This value refers to the number of pixels the given div content has been scrolled vertically to.
Example #2
Trying to add some animation effects to the scrolling feature. By using the animate() method with the scrollTop property for scrolling upwards to a page with some animation.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example for jQuery scrollTop</title>
<style> body {
font: 18px Arial, sans-serif;
}
.scroll {
background-color:lightblue; height: 400px;
width: 500px;
}
.scrolltoTop { position: fixed; bottom: 10px; left: 10px;
background: peachpuff; color: maroon;
border-radius: 30px; padding: 15px;
font-weight: bold; line-height: normal; border: none;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function() {
$(".scrolltoTop").click(function() {
$("html, body").animate(
{
scrollTop: 0
},
"slow"
);
return false;
});
});
</script>
</head>
<body>
<h1 style="color:darkslategrey"> jQuery scrollTop </h1>
</h1>
<h3 style="color:midnightblue">
Click the button to scroll to top </h3>
</h3>
<p class="scroll">
This example explains the effect of the jQuery scrollTop() method. This inbuilt method gers or sets the verticall scrollbar position of a specified element. The position refers to the number of pixels above the scrollable area.
</p>
<p class="scroll">
The position refers to the number of pixels above the scrollable area.
</p>
<p class="scroll">
When this method is used to get the scrollbar position for the specified element, current vertical position of the first matched element in the set of matched elements is returned.When this method is used to set the scrollbar position, the vertical position of every matched element is set.
</p>
<button type="button" class="scrolltoTop"> Scroll to Top
</button>
</body>
</html>Output:
Initially, the vertical scrollbar is at the topmost position of the screen.
There is a button displaying “Scroll to Top” at the bottom of the screen.
Start scrolling gradually vertically downwards.
If at any point you feel to move at the very top of the page, click on Scroll to Top button.
In the below screenshot, the scrollbar can be seen at the bottom-most position of the page.
Now, if the button is clicked, it will take the scrollbar all the way to the top of the screen.
One can add various animation effects to the scrolling feature by setting or modifying the speed of scrollTop property.
In our example, we have animated the scrolling with the default speed.
Example #3
How to return the vertical scrollbar position as we move along a specific div.
Code:
<html>
<head>
<title>jQuery scrollTop() method</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function() {
$("div.scroll").scrollTop( 200 );
$("div.scroll").mousemove(function() {
var pos = $("div.scroll").scrollTop();
$("#value").html("Vertical scrollbar position: <span>" + pos + "</span>.");
});
});
</script>
<style>
div.scroll {
background: #cccccc none repeat scroll 0 0;
border: 3px solid lightslategrey;
margin: 3px;
padding: 10px;
position: relative;
width: 300px;
height: 200px;
overflow: auto;
}
div.value {
margin: 10px;
width: 300px;
height: 50px;
background-color: lightblue;
}
p {
margin: 10px;
padding: 10px;
border: 3px solid lightslategrey;
width: 1000px;
height: 1000px;
margin: 3px;
}
</style>
</head>
<body>
<div class="scroll"><p>jQuery scrollTop()</p></div>
<span> Scroll vertical bar to see the scrollbar position.</span>
<div class="value"><span id="value"></span></div>
</body>
</html>Output:
Here, vertical scrollbar can be seen at the topmost position of the div.
Vertical scrollbar position: 0px.
Now, the scrollbar starts moving vertically downwards.
Vertical scrollbar position now shows value: 454px.
Scrollbar is moved a bit more vertically downwards, now the Vertical scrollbar position: 839px.
Thus, we see that the value for the Vertical scrollbar position keeps on changing as we gradually scroll downwards.
Conclusion – jQuery scrollTop()
This basically adds animation to the scrolling feature without using any jQuery plugin. For custom animation, the animate() method can be used which functions by changing the value of scrollTop property gradually to create an animation effect.
$("html, body").animate({ scrollTop: value });Speed of the animation can also be modified as required.
Recommended Articles
This has been a guide to jQuery scrollTop(). Here we discuss the introduction, syntax, and Implementation of the jQuery scrollTop() Method. you may also have a look at the following articles to learn more –
