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
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
Recommended:-keydown function jQuery
Recommended:-List of jQuery Events Handling Methods with examples
Recommended:-Jquery Selector by .class | name | #id | Elements
Recommended:-Get the Current Page URL in jQuery
Recommended:-jQuery Ajax Get() Method Example
Recommended:-jQuery Get Data Text, Id, Attribute Value By Example
Recommended:-Set data attribute value jquery
Recommended:-select multiple class in jquery
Recommended:-How to Remove Attribute Of Html Elements In jQuery
Recommended:-Get radio button value jquery by id, name, class
Recommended:-jQuery – Remove Elements From array jQuery
Recommended:-Array to Comma Separated String jQuery
Recommended:-jQuery Ajax Form Submit with FormData Example
Recommended:-jQuery Form Validation Custom Error Message
