javascript - 将溢出的 div 平滑地滚动到其中的特定位置

<分区>

我有一个包含不同内容部分的滚动 div。当我点击标题时，我试图让 div 滚动到特定部分。我的 div 如下:

这是 fiddle 链接: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>

因此，当有人点击“Series 2”标题时，它应该使 div 滚动到“Series 2”。我怎样才能使 div 的内容平滑地滚动到那个点(即不是单次跳转，而是使用实际的滚动动画)？

最佳答案

使用jQuery你可以做一个滚动功能

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

然后是快速调用的方法