jQuery scrollTop Method

jQuery scrollTop Method

jQuery scrollTop method; Through this tutorial, You will learn what is jQuery scrollTop method and how to 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.

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.

Recommended jQuery Tutorials

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

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