jQuery scrollTop Method

jQuery Scrolltop method; Through this tutorial, i am going to show you how to scroll top from bottom to top uisng jQuery.

Using the jQuery Api provide scrollTop method to set or return the vertical scrollbar position for the selected HTML element.

Syntax of jQuery scrollTop Method

$("selector").scrollTop(Position);

Parameters of jQuery scrollTop Method

Position : – This specifies vertical scrollbar position in pixels.

Example for jQuery scrollTop Method

See the following example and demo for how use scrollTop method to selected html elements; as shown below:

<!DOCTYPE html>  
<html>  
<head>  
<title>Example Demo Of jQuery scrollTop Method</title> 
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>  
<script>  
$(document).ready(function(){  
    $("#btn-scrl").click(function(){  
        alert($("#scrlDiv").scrollTop() + " px");  
    });  
});  
</script>  
</head>  
<body>  
<div id="scrlDiv" style="border: 5px solid #23384E; background: #28BAA2;width:150px;height:100px;overflow:auto"> Scroll to the top of the page using JavaScript/jQuery.Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. 
</div><br>  
<button id="btn-scrl">Click Me!</button>   
</body>  
</html>

Demo for jQuery scrollTop Method

Example Demo Of jQuery scrollTop Method

Scroll to the top of the page using JavaScript/jQuery.Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero’s De Finibus Bonorum et Malorum for use in a type specimen book.

jQuery scrollTop Method