Question

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

以下是我的代码：

 <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>

所以当有人点击＆＃34;系列2＆＃34;标题，它应该使div滚动到＆＃34;系列2。＆＃34;如何使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等来改变速度

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

1 个答案: