jQuery scrollTop Method Example

jQuery scrollTop method; Through this tutorial, You will learn about jQuery scrollTop method and how to this method.

jQuery scrollTop Method Example

The scrollTop method in jQuery is used to get or set the vertical scroll position of an element. It is particularly useful when dealing with scrollable elements such as web pages or div elements with overflow set to “scroll” or “auto.”

Syntax jQuery scrollTop() Method

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

Parameters of jQuery scrollTop() Method

Position : – This specifies vertical scrollbar position in pixels.

Example jQuery scrollTop() method

This example will demostrate you how use scrollTop method to selected html elements.

<!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>

Output

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.

In this scrollTop method, first, you scroll the given box scroller and then press the click me button. After a click on the click me button, alert popup open with scroll values in pixels.

jQuery scrollTop Method Example