Use Js/jquery To Scroll A Div's Content That Has Overflow: Scroll Applied

So I have a div, with a bunch of content inside it that is wider than the div. I have set overflow-x: scroll and all is well. However I'd like to have two links on my page that all

Solution 1:

With jQuery the scrolling can be handled like in this example:

$(function(){
    var iv;
    var div = $('#content');
    $('#left').mousedown(function(){
        iv = setInterval(function(){
            div.scrollLeft( div.scrollLeft() - 4);
        },20);
    });
    $('#right').mousedown(function(){
        iv = setInterval(function(){
            div.scrollLeft( div.scrollLeft() + 4);
        },20);
    });
    $('#left,#right').on('mouseup mouseleave', function(){
        clearInterval(iv);
    });
});

JSFiddle: http://jsfiddle.net/jdNa9/1/ (basic example) http://jsfiddle.net/jdNa9/3/ (with a bit updated CSS)

Solution 2:

Use jQuery .scrollLeft(). For example if you want to scroll 300 pixels:

$("a.your_link").click(function(){
  $("#your_container").scrollLeft(300);
});