Understanding the jQuery scrollTop Method with Examples

Understanding the jQuery scrollTop Method with Examples

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

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 containing 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());
});

Change the position of the scrollbar and then click the button, you will get its 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 and also reduce 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 verticall scrollbar will scroll to 200px in 5 seconds.

In this way you can reduce the speed of scrolling.

DEMO DOWNLOAD

Share this article -

yogihosting

ABOUT THE AUTHOR

This article has been written by the Technical Staff of YogiHosting. Check out other articles on "WordPress, SEO, jQuery, HTML" and more.