jQuery API

.scrollTop()

Contents:

.scrollTop() Returns: Integer

Description: Get the current vertical position of the scroll bar for the first element in the set of matched elements.

  • version added: 1.2.6.scrollTop()

The vertical scroll position is the same as the number of pixels that are hidden from view above the scrollable area. If the scroll bar is at the very top, or if the element is not scrollable, this number will be 0.

Example:

Get the scrollTop of a paragraph.

<!DOCTYPE html>
<html>
<head>
  <style>
  p { margin:10px;padding:5px;border:2px solid #666; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>Hello</p><p></p>
<script>var p = $("p:first");
$("p:last").text( "scrollTop:" + p.scrollTop() );

</script>

</body>
</html>

Demo:

.scrollTop( value ) Returns: jQuery

Description: Set the current vertical position of the scroll bar for each of the set of matched elements.

  • version added: 1.2.6.scrollTop( value )

    valueAn integer indicating the new position to set the scroll bar to.

The vertical scroll position is the same as the number of pixels that are hidden from view above the scrollable area. Setting the scrollTop positions the vertical scroll of each matched element.

Example:

Set the scrollTop of a div.

<!DOCTYPE html>
<html>
<head>
  <style>
div.demo {
background:#CCCCCC none repeat scroll 0 0;
border:3px solid #666666;
margin:5px;
padding:5px;
position:relative;
width:200px;
height:100px;
overflow:auto;
}
  p { margin:10px;padding:5px;border:2px solid #666;width:1000px;height:1000px; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div class="demo"><h1>lalala</h1><p>Hello</p></div>
<script>$("div.demo").scrollTop(300);
</script>

</body>
</html>

Demo:

Support and Contributions

Need help with .scrollTop() or have a question about it? Visit the jQuery Forum or the #jquery channel on irc.freenode.net.

Think you've discovered a jQuery bug related to .scrollTop()? Report it to the jQuery core team.

Found a problem with this documentation? Report it on the GitHub issue tracker

  • Raphael

    If you want to use scrollTop(0) in a fixed CSS Layout for your content element an it is not working, try to use $(“html”).scrollTop(0); instead.

  • Matt W

    To get the top of the visible screen, use $(“body”).scrollTop. I found that “html” worked for Webkit, but “body” worked for both Webkit and Firefox.

    • Anonymous

      For me $(“body”).scrollTop() only worked in Chrome (I guess Safari as well but haven’t tested). $(“html”).scrollTop() on the contrary only worked in Firefox.

      What did work in both though was $(document).scrollTop().

      Edit:

      $(document) and neither of the other two did work in IE(8) so I had to find another solution. What did work in all three browsers was $(window).scrollTop().

      • Samuelzero

        you also saved my day! thanks

      • https://me.yahoo.com/a/KT3XMndnqpY9iBtBRGr4oNGJGExhwZSNCg--#673e6 hacker

        $(window).scrollTop() is the one that worked for me in all the current browsers… Thanks!!

        • riverc

          $(window).scrollTop() gives me this in IE8:

          Object doesn't support this action

          Chris “Jesdisciple” 's solution produces this error:

          Object expected

          Anyone know of a good cross-browser solution?

          • inkfree

            jQuery(window).scrollTop()

          • tehnoobifier

            I saw this somewhere else, and it works for me in IE 6, 7, 8; FF2.0 and all modern browsers:

            $('html, body')

      • exzero

        $(document) worked for me (IE7, FF3.6.7, Chrome 5, Safari 5.0, Opera 10.6)

        Thanks!

        • exzero

          I realized $(window) also works

  • Brandon

    It would be nice if this function supported animation. :)

    • Adrian

      It does support animation. You need to use the scrolltop as a method in the animation. i.e. :

      .animate({scrollTop:0}, 2000, ‘ease’)

  • Justin

    I'm using $(something).animate({scrollTop : y},1000); and I can't find any selector that actually works for all browsers. Using $('html,body'), as someone suggested on Stack Overflow, caused the animation, or at least my callback, to run twice.

    http://stackoverflow.com/questions/2783490/jque…

    • http://www.learningjquery.com/ Karl Swedberg

      My smoothScroll plugin has a .scrollable() method that allows you to do $('html,body').scrollable().animate… and it uses the first element in the set that it sees as “scrollable”:
      http://github.com/kswedberg/jquery-smooth-scroll

  • darknight

    scroll top doesn't work properly in opera . It scrolls up but causes some weird flickering effect while scrolling

  • http://conservatives.forumotion.net/ Chris "Jesdisciple"
  • Hamlet

    This works in FF, IE8, Safari, Chrome, and Opera:

    $(“html, body”).animate({scrollTop:0}, 'slow');

  • Ritesh Marda

    How to set the scrollbar color and width of an element??

  • Guest

    $(window).scrollTop() worked for me in IE and Firefox.

    With firefox it scrolls quickly, almost imperceptible to the human eye. Unfortunately IE shows scrolling, and that can get annoying to users if they are scrolling through hundreds of items a day.

    Anyone know how to get IE to scroll with little perceptible movement?

    • Tom

      My bad. My page scrolls when a key is pressed and I forgot to return false in my method that handles keypresses. Basically I overrode the arrow key and it was still moving in IE. BTW, I know you should not fight the browser and override keys (most of the time), but it works in my case.

  • Danushka

    Hi, I want to scroll to a specific location in a div. I used div.scrollTop(value) to scroll to the location. It works fine in firefox but not in IE8. What I m trying to do is preserving vertical scroll position of the div in a postback situation.

    Saving position:

    var scrollY = div.scrollTop();

    $(hiddenField).val(scrollY);

    Loading position:

    var y = $(hiddenField).val();

    div.scrollTop(y);

    am I doing anything wrong?

  • Draco

    Still doesn't work in IE8. scrollTop() returns 0 in all cases.

  • Chris Harrison

    This solved my problem in FF and IE8 but not webkit

  • G3yuri

    En el IE8 siempre devuelve 0

  • Donotreply

    I get the best result with
    $('body,html').animate({scrollTop:0},'fast');

    body // Safari, Chrome
    html // IE, Mozilla

  • http://www.facebook.com/people/Manas-Ranjan/1687159272 Manas Ranjan

    thank you

  • michaelbutler

    Warning: .scrollTop() will return 0 (and setting it to anything won't work) if the element, or a parent element, is set to “display:none;”. I had to apply my .scrollTop() logic after the element was shown.

    • busticated

      wish this point could be highlighted somehow… I ran into this one and it took me ages to sort out what the deal was… anyway, thanks for posting it!

  • michaelbutler

    Warning: .scrollTop() will return 0 (and setting it to anything won't work) if the element, or a parent element, is set to “display:none;”. I had to apply my .scrollTop() logic after the element was shown.

  • sid

    If I use $(window).scrollTop(); and alert it chrome gives me back [object DOMWindow]. In FF ans Safari everything works! What can I do?

    • Sid

      ok sorry, to save it in a variable called “top” was probalby not the best idea I got today :)

  • Jose Angel Yanez

    $(“html”).scrollTop(); worked like a charm, $(window).scrollTop(); didn't get it at IE8

    • Jose Angel Yanez

      Not in Opera, nothing seem to worked there.