Horizontall Smooth Scroll a Specific Div On Anchor Click

Question

I need to scroll (scroll bar) when click on anchor. On anchor click the scroll bar 100px off from the side which is clicked. If any one know so kindly guide me as soon as possible. I already spend 2 day on this work but still not success. I found one method for this but its only work for Mozilla not for other browsers. 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>

There are zillions of posts like this already, maybe you could try to search before asking? — Yanaro, Jun 25 '16 at 05:38
Possible duplicate of [Smooth scrolling when clicking an anchor link](http://stackoverflow.com/questions/7717527/smooth-scrolling-when-clicking-an-anchor-link) — 8eecf0d2, Jun 25 '16 at 05:47
Yes i already search to much but still don't know how to add this is page — Usman-Ali, Jun 25 '16 at 05:47
Yes i see these answers but not find desired method. Please see my example. — Usman-Ali, Jun 25 '16 at 05:52
check this article : http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizontal-page-scrolling-with-jquery/ — , Jun 25 '16 at 06:01

score 1 · Accepted Answer · answered Jun 25 '16 at 06:17

1

The basic idea is to use scrollLeft()

Check out this fiddle

answered Jun 25 '16 at 06:17

Hoa

3,179
1
25
33

Thanks dude. i appreciated your help. – Usman-Ali Jun 27 '16 at 02:00

score 0 · Answer 2 · answered Jun 25 '16 at 06:41

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 is used to get the page current layout.

Horizontall Smooth Scroll a Specific Div On Anchor Click

2 Answers2