difference between $('html, body').animate and $('body').animate?

Question

For example, to scroll to a certain element on the page (ie here: How to go to a specific element on page?)

$(\"#fromTHIS\").click(function() {
    $(\"html,         


        

Answer 1

Here is an example for cross browser animation:

//('html, body') is the jquery solution for cross browser scroll animation $('html, body').animate({ scrollTop: $(".abc-container").offset().top+ "-50px" }, 300)

Answer 2

The reason you use a selector for BOTH $('html, body') is because of web browser inconsistency. After a few tests I have found three things:

1. The browsers Firefox & IE utilize the html portion of this selector
2. Browsers in the "webkit class" eg: Safari and Chrome respond to the body.
3. Although one can avoid the issue all together by using $(document) instead.

There's also a ticket on the jQuery bug tracker specifically stating this issue here

Answer 3

$('html, body') seems to be the jquery solution for cross-browser scroll animation.

If you want a cross browser solution without animation, you can go ahead and try this:

$(window).scrollTop(0);
// Accepts int of pixels.

Tested it on latest Chrome, Opera and FF. Seems to work cross browser. (Unless someone can confirm that it doesn't work on IE or Safari or others)

Read more about jQuery scrollTop.