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, body").animate({ scrollTop: $("#toTHIS").offset().top }, 500);
    return true;
});

I've tried both and they both look that they are doing the job. What am I missing?

Are you testing cross browser? $('html, body') covers all browsers while $('body') doesn't. — Jeffpowrs, Oct 10 '13 at 18:29
as i recall, you need that that selector if you want your code to work in iframes — mkoryak, Oct 10 '13 at 18:29

Joe · Accepted Answer · 2017-07-05T15:29:18.173

28

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:

The browsers Firefox & IE utilize the html portion of this selector
Browsers in the "webkit class" eg: Safari and Chrome respond to the body.
~~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

edited Jul 05 '17 at 15:29

answered Nov 02 '13 at 02:19

Joe

thanks for this @Joe! One confusion i have is about the 3rd suggestion. from what I see $(document) selects really a wrapper around the html tag - $(document)[0].children[0]==... why wouldnt that be the same as $('html')? – Lior Nov 07 '13 at 15:50
2

Unfortunately your solution does not work on FF v30.0. What a bummer! – Steve C Jul 21 '14 at 14:33
`$("html, body").animate({ scrollTop: 400 }, 500);` is working right now on this very page in my FF30? maybe you have some sort of conflict? – Joe Jul 21 '14 at 15:34
1

Looks like jQuery either took down the ticket or changed the link... looking into getting an update for this answer – Joe Jun 16 '15 at 19:30
3

@Joe, as steve mentioned, $(document) it not working in Firefox. I tried with $('html,body') and it works. But using the document and it does nothing. You should scratch your *3rd thing*. – Alexis Wilke Feb 20 '16 at 07:57
This approach is particularly annoying if you're using the 'done/success' event handler for this animation, which gets executed twice, regardless of which selector works for your browser. – Troy Niemeier Sep 08 '22 at 19:19

score 0 · Answer 2 · answered Jan 31 '18 at 07:06

$('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)

3 Answers3