jQuery动画无法在Firefox的IE中工作？

Question

I have a function that I want to scroll my webpage horizontally, I have the following that works well in Chrome only it stumbles when I come to test it in Firefox and Internet Explorer . Can anybody see any notable errors in my syntax?

/* Navigtion */
$('nav ol li a').click(function(e){
    e.preventDefault();
    $('nav').find('.active').removeClass('active'); 
    $(this).addClass('active'); 


    if( $(this).hasClass('sectionOne') ){

        scrollTo = $('.section-one').position().left;             
        $('body').animate({'scrollLeft': scrollTo}, 800);

    } else if( $(this).hasClass('sectionTwo') ){

        scrollTo = $('.section-two').position().left;             
        $('body').animate({'scrollLeft': scrollTo}, 800);

    } else if( $(this).hasClass('sectionThree') ){

        scrollTo = $('.section-three').position().left;             
        $('body').animate({'scrollLeft': scrollTo}, 800);

    } else if( $(this).hasClass('sectionFour') ){

        scrollTo = $('.section-four').position().left;             
        $('body').animate({'scrollLeft': scrollTo}, 800);

    } else if( $(this).hasClass('sectionFive') ){

        scrollTo = $('.section-five').position().left;             
        $('body').animate({'scrollLeft': scrollTo}, 800);

    } else if( $(this).hasClass('sectionSix') ){

        scrollTo = $('.section-six').position().left;             
        $('body').animate({'scrollLeft': scrollTo}, 800);

    } else if( $(this).hasClass('sectionSeven') ){

        scrollTo = $('.section-seven').position().left;             
        $('body').animate({'scrollLeft': scrollTo}, 800);

    }



});

Answer 1

Different browsers attach the scrollbar to different elements, you have to do this

$('html, body').animate({'scrollLeft': scrollTo}, 800);

---

Try to figure out a better way than all those if / else statements, here's an example.

Add data attributes to the anchors

<nav>
   <ol>
      <li>
         <a data-section="section-one" ....

and you can remove all the if/else madness and do the same with two lines

var scrollTo = $('.' + $(this).data('section')).position().left;             
$('html, body').animate({'scrollLeft': scrollTo}, 800);

Answer 2

try:

$('body').animate({'scrollLeft': scrollTo}, 800);
$('html').animate({'scrollLeft': scrollTo}, 800);

Some browsers work with 'html' and some work with 'body'