Black friday

Save big!

All courses under $5 - for a limited time!

Code has been added to clipboard!

jQuery .scrollTop(): Set or Return the Vertical Position of Scrollbar

Reading time 1 min
Published Jan 23, 2018
Updated Oct 1, 2019

jQuery scrollTop: Main Tips

  • jQuery .scrollTop() returns the vertical position of the scrollbar for the first matched HTML element.
  • .scrollTop() jQuery method can also define the vertical position of the scrollbar for every specified element.
  • The vertical scroll position equals to the amount of pixels at the top that are hidden when a scrollbar is in a particular position.

Usage of .scrollTop()

The .scrollTop() method sets or returns the vertical scrollbar position of the selected elements. When elements are not scrollable or the scrollbar is at very top, it returns 0.

See an example of using .scrollTop()() jQuery method on a <div> element:

Example
$("button").click(() => {
    alert($("div").scrollTop());
});

The first type of jQuery .scrollTop()() syntax does not take any arguments. It simply returns the scrollbar position:

$(selector).scrollTop();

The second type sets the vertical scrollbar position for elements:

$(selector).scrollTop(scrollPosition);

Note: to make jQuery scroll to different places of the document, you can use .scrollTo().