jQuery API scrollTop(Optional) Method With Demo

jQuery api provide several methods for creating a dynamic and interactive web pages with the help of jquery methods. Today we are going to discuss about jQuery ScrollTop method, how to use it ? how it is works?. In this tutorial You will learn scrollTop method and uses of this method.

scrollTop() Method By jQuery

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

scrollTop() Method Syntax

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

ScrollTop Parameters

  • Position : – This specifies vertical scrollbar position in pixels.

By 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 we scroll given box scroller and than press click me button. After a click on click me button, alert popup open with scroll values in pixels.

Spread the love

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *