189

What's the difference between:

$(window).scrollTop()

and 

$(document).scrollTop()

Thanks.

Hussein
  • 40,778
  • 25
  • 110
  • 143
frenchie
  • 46,331
  • 96
  • 283
  • 483
  • 2
    'html' or 'body' for setter (depend on browser)... 'window' for getter... cf Fiddle : http://jsfiddle.net/molokoloco/uCrLa/ – molokoloco Nov 08 '11 at 17:19

4 Answers4

154

They are both going to have the same effect.

However, as pointed out in the comments: $(window).scrollTop() is supported by more web browsers than $('html').scrollTop().

Visual Vincent
  • 17,424
  • 5
  • 24
  • 66
Bodman
  • 7,243
  • 3
  • 25
  • 32
  • 3
    it returns 0 in IE8 (although my page is in quirks mode, which may play a factor) – Greg Ogle Sep 26 '12 at 20:17
  • Dude you are great. +1 to $("html").scrollTop(). – Jonas T Dec 18 '12 at 06:22
  • 40
    $('html').scrollTop() is not cross-browser (as a setter it doesn't work at least in Chrome). The most crossbrowser way to do it for now is: $(window).scrollTop() as a getter, $('html,body').scrollTop(offset) as a setter. – Georgii Ivankin Jan 18 '13 at 13:08
  • 6
    According to [this reference](http://api.jquery.com/scrollTop/), without arguments `scrollTop` doesn't scroll anywhere, but just returns the current scroll location. – O. R. Mapper Aug 12 '13 at 12:47
  • @O.R.Mapper - If only that were actually true. `$(window).scrollTop()` scrolls to the top of the document all day. [Here](http://stackoverflow.com/a/3464890/434340) is a better explanation. – d2burke Apr 15 '14 at 18:40
  • As @George Ivankin said - this will not working in Chrome. This worked for me: $('html body').scrollTop(0); – Andrew Sep 09 '14 at 12:01
  • 3
    @d2burke `scrollTop()` is a getter and `scrollTop(value)` is a setter. `scrollTop()` without arguments does not change the scroll position. –  Feb 19 '15 at 22:20
  • This answer is marked as the right answer but considering the confusion it creates with this false statement, "Both scroll to the top of the object", should it not be edited? As a few have noted here, scrollTop() with no argument is a getter. – surfbuds Apr 04 '16 at 07:02
  • `$(window).scrollTop(0)` is the best solution worked on my tests. – user3304007 Feb 08 '17 at 09:25
  • What's the JavaScript way? (not JQuery) – Mohammad Kermani Aug 03 '17 at 08:59
  • 1
    @M98 window.scrollTo(x,y) – Bodman Aug 03 '17 at 22:13
37

First, you need to understand the difference between window and document. The window object is a top level client side object. There is nothing above the window object. JavaScript is an object orientated language. You start with an object and apply methods to its properties or the properties of its object groups. For example, the document object is an object of the window object. To change the document's background color, you'd set the document's bgcolor property.

window.document.bgcolor = "red"

To answer your question, There is no difference in the end result between window and document scrollTop. Both will give the same output.

Check working example at http://jsfiddle.net/7VRvj/6/

In general use document mainly to register events and use window to do things like scroll, scrollTop, and resize.

Gerold Broser
  • 11,355
  • 4
  • 36
  • 85
Hussein
  • 40,778
  • 25
  • 110
  • 143
  • No difference in the end result. Both will give the same output. – Hussein Mar 20 '11 at 20:46
  • Apprently not, some browsers do not support window scroll as the window object may not be the object that is overflowing. – Bodman Mar 20 '11 at 20:51
  • 11
    What browser do not support window, be specific. Here's an example http://jsfiddle.net/7VRvj/4/. Check it in all browsers and let me know which browser it's not working on. – Hussein Mar 20 '11 at 20:57
4

Cross browser way of doing this is 

var top = ($(window).scrollTop() || $("body").scrollTop());
amachree tamunoemi
  • 763
  • 2
  • 10
  • 29
0

I've just had some of the similar problems with scrollTop described here.

In the end I got around this on Firefox and IE by using the selector $('*').scrollTop(0);

Not perfect if you have elements you don't want to effect but it gets around the Document, Body, HTML and Window disparity. If it helps...

Berkay Turancı
  • 3,056
  • 3
  • 28
  • 41
Tapiochre
  • 89
  • 1
  • 1
  • 20
    You should never use * this way (in fact, avoid * altogether). Instead of targeting one element, you're affecting the entire DOM. Huge performance hit. Selectors should be as precise as possible. – Vlad May 22 '14 at 03:45
  • 2
    I personally have always used `$("html,body").scrollTop(val)` -- never had any issues – Roi Apr 21 '15 at 03:51