Q:

Auto-scroll to a div when clicking on another div

When I click on one of the smaller divs on the left (inside of the div with the class "smallitems", I want for the div on the right (with the class "items") to auto-scroll to the appropriate larger div.
HTML:
 <div class="smallitems">
    <div class="col">1</div>
     <div class="col"> 2 </div>
     <div class="col"> 3</div>
     <div class="col">4</div>
     <div class="col"> 5 </div>
     <div class="col">6 </div>
     <div class="col"> 7</div>
    <div class="col">8</div>
 </div>    

 <div class="items">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">5</div>
</div>

JavaScript (with JQuery):
$('.smallitems .col').on("click", function(){

  //how use scroll items show

});

Example:
This is before I click on a div in the left div ("smallitems").

I've now clicked on the number 5 (<div class="col">5</div>) in the left div. As you can see the right div has scrolled to the 5th div (<div class="item">5</div>).

Similar to the above, I've clicked on the number 4, and subsequently have had the right div auto-scroll to the 4th div.

see jfiddle http://jsfiddle.net/h7bLK/

A:

$('.smallitems .col').on("click", function(){
    var index =  $(this).index();
    var items = $('.items');
    var item =  items.children().eq(index);
    items.scrollLeft((item.width() - 50)  * index);
});

When you add a new div to the items play around with the value of 50.

