光滑的jquery scrollLeft到div

Question

请告诉我可能是什么问题。轻微的scrollLeft阻止工作非常奇怪。如果连接到身体，那么一切都很好。但是如果对于一个div，那么就会发生一些奇怪的事情）我觉得css中有些东西..示例代码：http://jsfiddle.net/xmocartx/ENYLW/5/

    <ul class="nav">
        <li><a href="#section1">Link_1</a></li>
        <li><a href="#section2">Link_2</a></li>
        <li><a href="#section3">Link_3</a></li>
        <li><a href="#section4">Link_4</a></li>
    </ul>

<div class="AA">
    <div id="BB">
        <div class="section black" id="section1">
            1111
        </div>
        <div class="section white" id="section2">
            2222
        </div>
        <div class="section black" id="section3">
            3333
        </div>
        <div class="section black" id="section4">
            4444                
        </div>
    </div>
</div><!--AAAAAAAA-->
    ul.nav{
position:fixed;
top:50px;
left:0;
z-index:999;
list-style:none;
}
ul.nav li {
display:inline;
}
.section{
width: 1250px;
float: left;
height: 100%;
}
.AA{
width: 100%;
overflow:hidden;
}
#BB{
background: #F6FFD7;
width: 10000px;
height: 100%;
float: left;
}

$(document).ready(function($){
    $(function() {
        $('ul.nav a').bind('click',function(event){
            var $anchor = $(this);              
            $('.AA').stop().animate({
                scrollLeft: $($anchor.attr('href')).offset().left
            }, 1000);
            event.preventDefault();
        });
    });
});