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);