28

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?

2
  • 6
    Are you testing cross browser? $('html, body') covers all browsers while $('body') doesn't.
    – Jeffpowrs
    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
    Oct 10, 2013 at 18:29

3 Answers 3

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:

  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

6
  • 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]==<html>..</html>. why wouldnt that be the same as $('html')?
    – Lior
    Nov 7, 2013 at 15:50
  • 2
    Unfortunately your solution does not work on FF v30.0. What a bummer!
    – Steve C
    Jul 21, 2014 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, 2014 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, 2015 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. Feb 20, 2016 at 7:57
0

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

0

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)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.