CODEWITHSUNDEEP
javascriptjquerywindowdocumentscrolltop
frenchie
frenchie

Reputation: 52047

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

What's the difference between:

$(window).scrollTop()

and 

$(document).scrollTop()

Thanks.

Upvotes: 191

Views: 386731

Answers (4)

Hussein
Hussein

Reputation: 42818

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.

Upvotes: 39

Bodman
Bodman

Reputation: 8056

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

Upvotes: 158

amachree tamunoemi
amachree tamunoemi

Reputation: 825

Cross browser way of doing this is 

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

Upvotes: 4

Tapiochre
Tapiochre

Reputation: 89

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

Upvotes: 0

Related Questions