javascript - Auto-scroll to a div when clicking on another div -

when click on 1 of smaller divs on left (inside of div class "smallitems", want div on right (with class "items") auto-scroll 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 before click on div in left div ("smallitems").

i've clicked on number 5 (<div class="col">5</div>) in left div. can see right div has scrolled 5th div (<div class="item">5</div>).

similar above, i've clicked on number 4, , subsequently have had right div auto-scroll 4th div.

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

$('.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 add new div items play around value of 50.