为什么我不能让我的jQuery离开Scroll动画工作？

Question

所以我试图使用jQuery动画一个简单的水平滚动，但它不会触发，为什么会这样？

http://jsfiddle.net/langoon/b5ZTH/

HTML

<a href="#1">1</a>
<a href="#2">2</a>
<a href="#3">3</a>

<section>
    <a name="1">1</a>
    <a name="2">2</a>
    <a name="3">3</a>
<section>

CSS

section { 
    width: 100%; 
    overflow: auto; 
    white-space: nowrap; 
    }
a[name] { 
    width: 100%; 
    display: inline-block; 
    white-space: normal; 
    }
a[name='1'] { 
    background-color: green;
    }
a[name='2'] { 
    background-color: yellow;
    }
a[name='3'] { 
    background-color: red;
    }

的jQuery

$('a[href]').click(function(){

    $('section').stop().animate({
        scrollLeft: $(this.hash).offset().left
    }, 1000);

});​

Answer 1

这可行：

var w = [];
var wt = 0;

$('section a').each(function(i,v){
    (i == 0) ? wt = 0 : wt += $(this).width();
     w.push(wt);
});


$('a[href]').click(function(){
    var n = this.hash.replace('#','');
    var el = $.find("a[name='"+n+"']");
    console.log(w[n-1]);
    $('section').animate({
        scrollLeft: w[n-1]
    }, 1000);

});

Answer 2

我通过将jQuery代码更改为：

来解决它

$('a[href]').click(function(){

    var basePos = $("a[name]").offset().left/-1; // Get position of first a[name]
    var scrollPos = $("a[name='" + this.hash.replace('#','') + "']").offset().left;

    $('section').stop().animate({
        scrollLeft: basePos + scrollPos 
    }, 'fast');

});​