$(window).scrollTop() vs. $(document).scrollTop()

Question

What's the difference between:

$(window).scrollTop()

and

$(document).scrollTop()

Thanks.

Borscht

'html' or 'body' for setter (depend on browser)... 'window' for getter... cf Fiddle : jsfiddle.net/molokoloco/uCrLa – Hyder

Answer 1

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

Wickliffe

it returns 0 in IE8 (although my page is in quirks mode, which may play a factor) – Comprehension

$('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. – Yamauchi

According to this reference, without arguments scrollTop doesn't scroll anywhere, but just returns the current scroll location. – Borsch

@O.R.Mapper - If only that were actually true. $(window).scrollTop() scrolls to the top of the document all day. Here is a better explanation. – Sandeesandeep

As @George Ivankin said - this will not working in Chrome. This worked for me: $('html body').scrollTop(0); – Stroller

@Sandeesandeep scrollTop() is a getter and scrollTop(value) is a setter. scrollTop() without arguments does not change the scroll position. – Katz

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. – Whosoever

$(window).scrollTop(0) is the best solution worked on my tests. – Procryptic

What's the JavaScript way? (not JQuery) – Christenechristening

@M98 window.scrollTo(x,y) – Wickliffe

Answer 2

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.

Aleshia

No difference in the end result. Both will give the same output. – Aleshia

Apprently not, some browsers do not support window scroll as the window object may not be the object that is overflowing. – Wickliffe

What browser do not support window, be specific. Here's an example jsfiddle.net/7VRvj/4. Check it in all browsers and let me know which browser it's not working on. – Aleshia

Answer 3

Cross browser way of doing this is

var top = ($(window).scrollTop() || $("body").scrollTop());

Elna

Note: $("body").scrollTop() always return 0 in Google Chrome. – Cubitiere

$("body").scrollTop() is deprecated, does not work on Chrome or FF anymore. It will return 0 – Kristynkrock

Answer 4

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...

Derryberry

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. – Annorah

I personally have always used $("html,body").scrollTop(val) -- never had any issues – Brody