❮❮ PREV NEXT ❯❯

HTML METHODS - scrollTop()

The scrollTop() method is used to get and set the position of the vertical scrollbar of an HTML element.

Say, you want to get the exact position of the cursor when <p> element is vertically scrolled.

And the scrollTop() method helps us to achieve that.

Also it helps us to set the vertical scroll cursor position.

Let us see how scrollTop() method acts as a getter method.

scrollTop() as Getter method

Example :

<html>
  	<head>
    	<title> My First Programme </title>
    	
    	<script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
  	</head>

  	<body>
    	<h1> JQuery </h1>
    	
    	<p style = "width: 150px; height: 70px;overflow:auto">
        	 Scroll up and <br/> 
             down and click <br/> 
             on the below  <br/> 
             button to see  <br/> 
             the change    <br/>       
        </p>
 
        <button> Click Here </button> 
	  
      	<script>
      
			$('button').click( function() { 
            	alert($('p').scrollTop());
            });
            
      	</script>      
  	</body>
</html>

Output :

So, if we look at the above code, we have a <p> element.

<p style = "width: 150px; height: 70px;overflow:auto">
	Scroll up and <br/>
	down and click <br/>
	on the below  <br/>
	button to see  <br/>
	the change    <br/>
</p>

And we have a <button> element,

<button> Click Here </button>

And on button click, the JQuery statement gets triggered,

$('button').click( function() {
	alert($('p').scrollTop());
});

So, what we have done is, invoked the scrollTop() method on the <p> element.

$('p').scrollTop()

And an alert is generated,

alert($('p').scrollTop());

Now, you need to move the contents of the <p> element up or down(Well! They are scrollable).

<p style = "width: 150px; height: 70px;overflow:auto">
	Scroll up and <br/>
	down and click <br/>
	on the below  <br/>
	button to see  <br/>
	the change    <br/>
</p>

And then click on the button, you can see the value in the alert changes.

This is because the scrollTop() method captures the position of the cursor when the contents of the <p> element is moved vertically.

scrollTop() as Setter method