Understanding the jQuery scrollTop Method with Examples

Last Updated: June 4, 2021

If you are working with vertical scrollbar of an element then the jQuery scrollTop method is built for you. From this method you can either set the position of scrollbar, or can get the scrollbar’s position. Remember, if the scrollbar is at the top then scrollTop() will return 0.

Related Article – How to easily create jQuery Infinite Scroll feature in your website and change the numbered paging to auto paging.

jQuery scrollTop Syntax

To get the scrollbar position:

$(selector).scrollTop()

To set the scrollbar postion:

$(selector).scrollTop(position)

The ‘position’ should be a number and specifies the position of scrollbar to set in pixels.

Example: Get the position of Vertical Scrollbar

I have a div element which contains some text. There is also a button which when clicked will return the position of vertical scrollbar using the scrollTop() method.

The code for this is shown below:

<div id="div1" 
style="border:2px solid black;width:200px;height:250px;overflow:auto">
    jQuery is fun and easy. 
    jQuery is fun and easy. 
    jQuery is fun and easy. 
    jQuery is fun and easy. 
    jQuery is fun and easy. 
    jQuery is fun and easy. 
    jQuery is fun and easy. 
    jQuery is fun and easy. 
    jQuery is fun and easy. 
    jQuery is fun and easy. 
    jQuery is fun and easy. 
    jQuery is fun and easy. 
    jQuery is fun and easy. 
    jQuery is fun and easy. 
    jQuery is fun and easy. 
    jQuery is fun and easy. 
    jQuery is fun and easy. 
    jQuery is fun and easy. 
    jQuery is fun and easy. 
    jQuery is fun and easy. 
    jQuery is fun and easy.
</div>
 
<button id="button1">Click</button> 
$("#button1").click(function (e) {
    alert($("#div1").scrollTop());
});

Now change the position of the scrollbar and then click the button, you will get it’s position displayed on the alert box.

Example: Move the Vertical Scrollbar to 200px

In the below code I am moving the vertical scrollbar’s position to 200px. Hint – .scrollTop(200)

<div id="div2" 
style="border:2px solid black;width:200px;height:250px;overflow:auto">
    jQuery is fun and easy. 
    jQuery is fun and easy. 
    jQuery is fun and easy. 
    jQuery is fun and easy. 
    jQuery is fun and easy. 
    jQuery is fun and easy. 
    jQuery is fun and easy. 
    jQuery is fun and easy. 
    jQuery is fun and easy. 
    jQuery is fun and easy. 
    jQuery is fun and easy. 
    jQuery is fun and easy. 
    jQuery is fun and easy. 
    jQuery is fun and easy. 
    jQuery is fun and easy. 
    jQuery is fun and easy. 
    jQuery is fun and easy. 
    jQuery is fun and easy. 
    jQuery is fun and easy. 
    jQuery is fun and easy. 
    jQuery is fun and easy.
</div>
 
<button id="button2">Click</button>
$("#button2").click(function (e) {
    $("#div2").scrollTop(200);
});

Example: scrollTop with Animation

You can also use jQuery Animate method with the .scrollTop() to bring animation effects. You can also reduce the speed of scrolling.

Here I will do the vertical scrolling in 5 seconds.

<div id="div3" 
style="border:2px solid black;width:200px;height:250px;overflow:auto">
    jQuery is fun and easy. 
    jQuery is fun and easy. 
    jQuery is fun and easy. 
    jQuery is fun and easy. 
    jQuery is fun and easy. 
    jQuery is fun and easy. 
    jQuery is fun and easy. 
    jQuery is fun and easy. 
    jQuery is fun and easy. 
    jQuery is fun and easy. 
    jQuery is fun and easy. 
    jQuery is fun and easy. 
    jQuery is fun and easy. 
    jQuery is fun and easy. 
    jQuery is fun and easy. 
    jQuery is fun and easy. 
    jQuery is fun and easy. 
    jQuery is fun and easy. 
    jQuery is fun and easy. 
    jQuery is fun and easy. 
    jQuery is fun and easy.
</div>
 
<button id="button3">Click</button>
$("#div3").animate({ scrollTop: 200 }, 5000);

When you click the button the vertical scrollbar will scroll to 200px in 5 seconds.

In this way you can reduce the speed of scrolling.

Check the download link:

DOWNLOAD

Related Article – How to use jQuery to Scroll to a Specific Topic on the page