ChatGPT解决这个技术问题 Extra ChatGPT

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

What's the difference between:

$(window).scrollTop()

and

$(document).scrollTop()

Thanks.

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

V
Visual Vincent

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


it returns 0 in IE8 (although my page is in quirks mode, which may play a factor)
$('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.
According to this reference, without arguments scrollTop doesn't scroll anywhere, but just returns the current scroll location.
@d2burke scrollTop() is a getter and scrollTop(value) is a setter. scrollTop() without arguments does not change the scroll position.
@M98 window.scrollTo(x,y)
G
Gerold Broser

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.


No difference in the end result. Both will give the same output.
Apprently not, some browsers do not support window scroll as the window object may not be the object that is overflowing.
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.
a
amachree tamunoemi

Cross browser way of doing this is

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

Note: $("body").scrollTop() always return 0 in Google Chrome.
$("body").scrollTop() is deprecated, does not work on Chrome or FF anymore. It will return 0
B
Berkay Turancı

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


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.
I personally have always used $("html,body").scrollTop(val) -- never had any issues