scroll

by karin

HTML

<div id="outer">
    <div id="inner">scroll me! scroll me more...and more....</div>
</div>
<button id="btnleft">left</button>
<button id="btnright">right</button>

CSS

#outer {

    position: relative;

    width:300px;

    height:50px;

    background:pink;

    overflow-x:auto;

}

#inner {

    width:800px;

    height:30px;

    background:yellow;

    border:thin solid red

}

JavaScript

$("div.demo").scrollLeft(300);

$("#btnright").on('click', function () {
    var leftPos = $('#outer').scrollLeft();

    $("#outer").animate({
        scrollLeft:leftPos + 200
    }, 800);

});
$("#btnleft").on('click', function () {
    var leftPos = $('#outer').scrollLeft();

    $("#outer").animate({
        scrollLeft:leftPos - 200
    }, 800);

});