順利滾動一個溢出的divv到它的一個特定位置

Question

我有一個滾動div包含不同部分的內容。我試圖讓div滾動到一個特定的部分，當我點擊標題。我的div是如下：

這裏是小提琴鏈接：http://jsfiddle.net/4Fx4a/1/

下面來看看我的代碼：

<div class="callout panel" style="background-color:#535F6D;"> 
    <div class="row"> 
    <div class="large-4 medium-4 columns" style="height:100px;"> 
     <div class="callout" style=""> 
     <p style="color:#fff;font-size:11px;text-align:left;"> 
      Event cum exhibition 
      <span style="text-transform:uppercase"> 
      <br/> 
      Series 1 
      </span> 
     </p> 
     <p style="color:#fff;font-size:12px;text-align:left"> 
      Series 2 
     </p> 
     </div> 
    </div> 
    <div class="large-8 medium-8 columns" style="border-left:1px dotted #fff;height:215px;overflow-y:scroll"> 
     <div class="callout"> 
     <p style="color:#fff;font-size:14px;text-align:left" id="series1"> 
     Series 1 
      <br/> 
      Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 

     </p> 

     <p style="color:#fff;font-size:14px;text-align:left" id="series2"> 
     Series 2 
      <br/> 
      Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 

     </p> 
     </div> 
    </div> 
    </div> 

</div> 

所以，當有人點擊了「系列2」頭，它應該使該div滾動到「系列2」。我怎樣才能讓div順利滾動它的內容到那一點（即不是作爲一個單獨的跳轉，而是用一個實際的滾動動畫）？

Answer 1

使用jQuery你可以做一個滾動功能

(function($) { 
    $.fn.goTo = function() { 
     $('html, body').animate({ 
      scrollTop: $(this).offset().top + 'px' 
     }, 'fast'); 
     return this; 
    } 
})(jQuery); 

然後一個快速的方法來調用它

$('#series1').goTo(); 

然後添加一個onclick事件的標題和BAM

onclick="$('#series1').goTo();" 

這是一個JSFiddle

你可以通過改變fast到slow改變速度等