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

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:

$("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().