Updated March 31, 2023
Introduction to jQuery Scroll Position
In jQuery, we can get the position of the scroll bar and set it by the use of some methods available in jQuery; these are the in-built methods without the use of the external libraries. For example, in jQuery, we have the scrollTop() method, which helps us to get the position of the vertical scroll bar. We need to call this method on the selector in order to get the result. Also, in the same way, we can also set the position for the scroll, using the scrollTop() method only, so it will return us the position of the scroll bar which is first matched.
Syntax of jQuery Scroll Position
As we know, we can set and get the position of the scroll by the use of scrollTop() methods available in jQuery, but we need to follow the standard defined by jQuery to use this method.
1. To get the scroll position.
$(your_selector).scrollTop()2. To set the scroll position.
$(your_selector).scrollTop(position)As you can see in the above syntax, we can set and get the position of the specified selector, but we just have to be careful about the syntax in order to get the desired result.
How to Create Scroll Position in jQuery?
As we already know, to set or get the position of the scroll in jQuery, we have other methods that help us get the result. For example, we have scroll(), scrollTop() methods in jQuery, which can be used to get the position and also, by the use of these methods, we can create the position of the scroll as well.
scrollTop() method for position:
1. To get the position of the scroll
By the use of this method, we can get the position of the vertical scroll bar. Then, all we have to do is, we need to pass the selector in order to get the result for it.
Example:
Code:
<script>
$("div").scrollTop()
</script>
<div style="border:2px solid black;width:150px;height:50px;overflow:auto">
// provide long text here for scroll
</div>As you can see in the above program, we have created vertically by specifying the above style in the div tag. This has to be there in order to see the vertical scroll bar on the screen. We have given the width, height, and overflow property which makes the scroll bar to appear on the screen for a particular div tag. If we remove this property, then we will not be able to see the effect off the vertical scroll bar on the screen.
After this, we are trying to get the position of the scroll bar that we have created by the use of the scrollTop() method. If you can see, we have called this by using the sector that is ‘div’ here, so it will just return us the position of the scroll bar.
2. To set the position of the scroll
By the use of the same method, we can easily set the position for scroll; for this, we have to pass the position as the integer inside the method, and it will set the scroll to that position only.
Example:
Code:
<script>
$("div").scrollTop(100)
</script>
<div style="border:2px solid black;width:150px;height:50px;overflow:auto">
// provide long text here for scroll
</div>Now we have specified the position of the scroll so that it will start from there; the default position for the scroll is 0px. So we can change it by specifying the position; the code will be the same only difference is we have specified the position here.
Examples of jQuery Scroll Position
Different examples are mentioned below:
Example #1
Sample to show the get scroll position in jQuery.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
// sample program to show the scroll position
$(document).ready(function(){
$("button").click(function(){
var position = $("div").scrollTop()
document.getElementById("demoid").innerHTML = position;
});
});
</script>
</head>
<body>
<h3>Demo to show scroll position in jQuery !!</h3>
<button>Return position</button>
<br>
<br>
<div style="border:2px solid black;width:200px;height:80px;overflow:auto">
Sample for scroll position get. Sample for scroll position get. Sample for scroll position get. Sample for scroll position get. Sample for scroll position get. Sample for scroll position get.Sample for scroll position get. Sample for scroll position get. Sample for scroll position get. Sample for scroll position get. Sample for scroll position get. Sample for scroll position get. Sample for scroll position get.
</div>
<p >position is :: </p>
<p id= "demoid"> </p>
</body>
</html>Output:
Example #2
A simple example to set the position.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
// sample program to show the scroll position
$(document).ready(function(){
$("button").click(function(){
var position = $("div").scrollTop(300);
document.getElementById("demoid").innerHTML = position;
});
});
</script>
</head>
<body>
<h3>Demo to show scroll position in jQuery !!</h3>
<button>Return position</button>
<br>
<br>
<div style="border:2px solid black;width:200px;height:80px;overflow:auto">
Sample for scroll position get. Sample for scroll position get. Sample for scroll position get. Sample for scroll position get. Sample for scroll position get. Sample for scroll position get. Sample for scroll position get. Sample for scroll position get. Sample for scroll position get. Sample for scroll position get. Sample for scroll position get. Sample for scroll position get. Sample for scroll position get.
</div>
<p >position is :: </p>
<p id= "demoid"></p>
</body>
</html>Output:
Conclusion
We have seen the usage and implementation of scroll position; also, we have seen the methods that we have to use in order to get the position and set the position of the scroll bar; the default position for the scroll is 0px. This is easy to use and understand.
Recommended Articles
This is a guide to jQuery Scroll Position. Here we discuss the introduction, how to create a scroll position in jQuery? And examples, respectively. You may also have a look at the following articles to learn more –
