jQuery .scrollTop() Method

What Is .scrollTop()?

.scrollTop() gets or sets the vertical scroll offset in pixels — how much content is hidden above the visible area (since jQuery 1.2.6). At the top (or if not scrollable), the value is 0.

$el.scrollTop()        // getter → Number (first element)
$el.scrollTop(300)     // setter → jQuery (all matched)

$(window).scrollTop()  // page vertical scroll
$(window).scrollTop(0) // jump to top of page

How to Use .scrollTop()

Select a scrollable element (or the window), then get or set the offset.

1. Pick a scrollable container (overflow: auto/scroll) or $(window).
2. Call .scrollTop() with no args to read the current offset.
3. Call .scrollTop(value) to jump to a vertical position.
4. Optionally animate with .animate({ scrollTop: value }).

Pseudocode

function scrollTop(selection, value):
    if value is missing:
        return firstElement.verticalScrollPixels   // or 0

    for each el in selection:
        el.verticalScrollPixels = value
    return selection

Cheat Sheet

Keep these facts handy for vertical scrolling.

Live Preview

Scroll the box, then read or set .scrollTop().

scrollTop: 0

jQuery Examples

Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.

var p = $("p").first();
$("p").last().text("scrollTop:" + p.scrollTop());
// typically "scrollTop:0" for a normal paragraph

scrollTop:0

// Needs a tall child inside an overflow:auto box
$("div.demo").scrollTop(300);
console.log($("div.demo").scrollTop());  // ~300

300

var y = $(window).scrollTop();
console.log("pageY:", y);

$(window).scrollTop(0);  // jump to top
console.log("now:", $(window).scrollTop());

pageY: 0
now: 0

$("#panel").scrollTop(200);

$("#panel").stop().animate({ scrollTop: 0 }, 400, function () {
  console.log("at top:", $("#panel").scrollTop());
});

at top: 0

Performance Notes

Reading or setting scroll is inexpensive. Cost spikes when you attach heavy work to every scroll event — throttle those handlers.

Key Takeaways