jquery水平滚动，触发器/目标不会滚动到适当的位置

Question

我想水平滚动一个点击的项目到它的父母的0,0，但父母似乎滚动到随机位置。

HTML/JS

<div class="nav-tabs-wrapper"> 
    <ul> 
    <li><a href="#">Item 1</a></li> 
    <li><a href="#">Item 2</a></li> 
    <li><a href="#">Item 3</a></li> 
    <li><a href="#">Item 4</a></li> 
    <li><a href="#">Item 5</a></li> 
    <li><a href="#">Item 6</a></li> 
    </ul> 
</div> 

<script> 
$(function() { 

    $('.nav-tabs-wrapper a').on('click',function(){ 
    var $anchor = $(this); 
    $('.nav-tabs-wrapper').stop().animate({ scrollLeft: $($anchor).offset().left }, 300); 
    }); 

}); 
</script> 

SCSS

.nav-tabs-wrapper { 
    width: 120px; 
    background: #ccc; 
    overflow: hidden; 
    overflow-x: scroll; 

    ul { 
     margin: 0; 
     padding: 0; 
     list-style: none; 
     display: table; 
     white-space: nowrap; 
    } 

    li { 
    display: table-cell; 
    } 

    a { 
     display: inline-block; 
     width: 100%; 
     white-space: nowrap; 
     padding: 10px; 
    } 
} 

小提琴：http://jsfiddle.net/n8d69ma7/

理想我想有这些项目滚动到中心，但第一步是刚开滚动浏览正常。

任何帮助，将不胜感激！

Answer 1

这里是一个静版 http://jsfiddle.net/davidsonsousa/KVs94/

在这里，是基于点击“礼” - 元素的索引，它的宽度（HTML和CSS保持不变）一个动态的解决方案：

$(function() { 
    $('.nav-tabs-wrapper a').on('click',function(){ 
     var index = $(this).parent('li').index(); 
     var offset = (index) * $(this).width() - $(this).width()/2; 
     $('.nav-tabs-wrapper').animate({scrollLeft: offset}, 800); 
    }); 
}); 

如果您需要考虑填充或边距，请使用“outerWidth（true）”而不是“width（）”：

var offset = (index) * $(this).outerWidth(true) - 
     ($('.nav-tabs-wrapper').width()/2 - $(this).outerWidth(true)/2);