顺利滚动一个溢出的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改变速度等