Online Web Development Tutorials

jQuery scrollTop() method is the used to get the current vertical position of the scroll bar for the first element in the set of matched elements or set the vertical position of the scroll bar for every matched element.

scrollTop() Syntax:

Return vertical scrollbar position:

$(selector).scrollTop();

Set vertical scrollbar position:

$(selector).scrollTop(position);

# Example1

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery scrollTop()</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
  $("#button").click(function() {
     alert($("p").scrollTop() + " px");
  });
});
</script>
</head>
<body>
 <p style="height:90px;overflow:auto;border:1px solid #ddd;width:160px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ullamcorper, metus ac vehicula ultrices, lorem tellus pharetra arcu, eget elementum ipsum erat a eros. Vivamus turpis libero, rhoncus in dolor sed, accumsan imperdiet dolor. Praesent egestas, lorem pellentesque ultricies fermentum, magna sem dignissim quam, nec condimentum elit neque ut diam. Curabitur in purus libero. Pellentesque hendrerit ut mi in pretium. Praesent a sapien ligula. Proin iaculis vestibulum nisl vitae sollicitudin. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan elit eget lectus commodo laoreet at at nunc. Curabitur molestie tellus in sapien vehicula, a placerat erat commodo. Morbi vitae aliquet velit. Donec et nisi et massa vulputate lobortis eget non diam. Proin pellentesque sagittis risus, vitae placerat lorem.</p>
 <button style="margin:0 0 10px 0;background:#e8e8e8;" class="btn" id="button">Click here</button><br />
 </body>
</html>

# Example2

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery scrollTop()</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
     $("p").scrollTop(350);
});
</script>
</head>
<body>
 <p style="height:90px;overflow:auto;border:1px solid #ddd;width:160px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ullamcorper, metus ac vehicula ultrices, lorem tellus pharetra arcu, eget elementum ipsum erat a eros. Vivamus turpis libero, rhoncus in dolor sed, accumsan imperdiet dolor. Praesent egestas, lorem pellentesque ultricies fermentum, magna sem dignissim quam, nec condimentum elit neque ut diam. Curabitur in purus libero. Pellentesque hendrerit ut mi in pretium. Praesent a sapien ligula. Proin iaculis vestibulum nisl vitae sollicitudin. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan elit eget lectus commodo laoreet at at nunc. Curabitur molestie tellus in sapien vehicula, a placerat erat commodo. Morbi vitae aliquet velit. Donec et nisi et massa vulputate lobortis eget non diam. Proin pellentesque sagittis risus, vitae placerat lorem.</p>
 </body>
</html>

JQuery ScrollTop()