jQuery scrollTop() Method, Easy To Learn jQuery scrollTop() Method

jQuery scrollTop() Method

The jQuery scrollTop() method is used to set or return(get) the vertical scrollbar position for the selected element. When the scrollbar is on the top, it specifies the position 0.

When used to return the position : When this method is used to return the position, The current vertical position of the FIRST matched element in the set.

When used to set the position : When this method is used to set the position, it sets the vertical position of the scrollbar for ALL matched element.

Syntax

Return vertical scrollbar position :

$(selector).scrollTop()

Set vertical scrollbar position :

$(selector).scrollTop(position)

Parameter	Description
position	It Specifies the vertical scrollbar position in pixels

jQuery scrollTop() Example :

<!DOCTYPE html>
<html>
<head>
<title>jQuery scrollTop() Method</title>
 
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        alert($("div").scrollTop() + " px");
    });
});
</script>
<style type="text/css">
.btn{ padding:6px 15px;}
.box{
border:2px solid #0099da; 
width:300px; 
height:100px; 
overflow:auto; 
margin:5px 0px 15px;
}
</style>
</head>
 
<body>
 
<div class="box">

<p><strong>Dummy Text :</strong> 

Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of 
Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.

</p>

</div>
 
<button type="button" class="btn">Return the vertical position of the scrollbar!</button>
 
</body>
</html>

Output :

Another scrollTop() Example :

<!DOCTYPE html>
<html>
<head>
<title>jQuery scrollTop() Method</title>
 
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$( "div.demo" ).scrollTop( 300 );  
</script>
<style type="text/css">
.box{
border:2px solid #0099da; 
width:300px; 
height:100px; 
overflow:auto; 
margin:5px 0px 15px; 
padding:10px;
}
p{ width:450px; text-align:justify; padding:10px 0px;}
</style>
</head>
 
<body>
 
<div class="box">
<h2>Free Time Learning</h2>
<h2>http://www.freetimelearning.com</h2>
<p><strong>Dummy Text :</strong> 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and more recently with desktop 
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
 
</body>
</html>

Output :

jQuery Tutorial