javascript - difference between $('html, body').animate and $('body').animate? - Stack Overflow

admin管理员组

文章数量:1178538

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?

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?

• javascript
• jquery

Share Improve this question Follow edited May 23, 2017 at 12:26 CommunityBot 111 silver badge asked Oct 10, 2013 at 18:27 LiorLior 40.6k1212 gold badges3939 silver badges4040 bronze badges 2

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

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 29

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

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

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)

本文标签： javascriptdifference between (39htmlbody39)animate and (39body39)animateStack Overflow