将溢出的 divv 平滑滚动到其中的特定位置[重复]

Posted 2023-05-08

【中文标题】将溢出的 divv 平滑滚动到其中的特定位置[重复]

【英文标题】：Smoothly scroll an overflowed divv to a particular position inside it [duplicate]

【发布时间】：2014-07-06 02:55:24

【问题描述】：

我有一个包含不同内容部分的滚动 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>

所以当有人点击“Series 2”标题时，它应该使 div 滚动到“Series 2”。如何使 div 将其内容平滑地滚动到该点（即不是单次跳转，而是使用实际的滚动动画）？

【问题讨论】：

如果您愿意，您需要使用 jquery 或 javascript

你能生成一个小提琴，以便我有一个想法

我不知道滚动到特定部分，但我知道滚动到顶部

No Mr.coder...这里不需要...谢谢

我找到了答案here

【参考方案1】：

使用jQuery可以制作滚动功能

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

然后快速调用它

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

然后在标题和bam中添加一个onclick事件

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

这是JSFiddle

您可以通过将fast 更改为slow 等来改变速度