Horizo​​ntall Smooth Scroll特定Div On Anchor Click

Question

单击锚点时我需要滚动（滚动条）。在锚点上单击从单击的一侧关闭滚动条100px。如果有人知道，请尽快指导我。我已经花了2天时间完成这项工作，但仍然没有成功。我找到了一种方法，但它对Mozilla的唯一工作不适用于其他浏览器。 Example

<div class="col-md-6 con">
    <div class="prev pull-left">
        <a class="next">
            Prev
        </a>
    </div>
    <div class="prev pull-right">
        <a class="next">
            Next
        </a>
    </div>
    <div class="col-md-6">
        <table class="table">
            <td>Hello</td>
            <td>Hello</td>
            <td>Hello</td>
            <td>Hello</td>
            <td>Hello</td>
            <td>Hello</td>
            <td>Hello</td>
            <td>Hello</td>
            <td>Hello</td>
            <td>Hello</td>
            <td>Hello</td>
            <td>Hello</td>
            <td>Hello</td>
            <td>Hello</td>
            <td>Hello</td>
            <td>Hello</td>
            <td>Hello</td>
            <td>Hello</td>
            <td>Hello</td>
            <td>Hello</td>
            <td>Hello</td>
            <td>Hello</td>
            <td>Hello</td>
            <td>Hello</td>
            <td>Hello</td>
            <td>Hello</td>
            <td>Hello</td>
            <td>Hello</td>
            <td>Hello</td>
        </table>
    </div>
</div>

Answer 1

基本思路是使用scrollLeft()

查看this fiddle

Answer 2

JS Fiddle Link

$('.prev').click(function(){
    if (getStyle(null,'direction') == 'ltr'){
    $('.table-responsive').animate({scrollLeft: -$( '.table-responsive' ).offset().left},1000);
} else {
    $('.table-responsive').animate({scrollLeft:$( '.table-responsive' ).offset().left},1000);
}
});



$('.next').click(function(){
    if (getStyle(null,'direction') == 'ltr'){
    $('.table-responsive').animate({scrollLeft: -$( '.table-responsive' ).offset().left+ $('.table-responsive table').outerWidth()},1000);
} else {
    $('.table-responsive').animate({scrollLeft:$( '.table-responsive' ).offset().left+$('.table-responsive  table').width()},1000);
}
});

function getStyle(el,styleProp){
    var x = document.getElementById(el) || document.body;
    if (x.currentStyle)
        var y = x.currentStyle[styleProp];
    else if (window.getComputedStyle)
        var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
    return y;
}

getStyles用于获取页面当前布局。