平滑滚动到 div 内的锚点

Posted 2023-03-10

【中文标题】平滑滚动到 div 内的锚点

【英文标题】：Smooth scrolling to anchor inside div

【发布时间】：2014-10-26 19:25:30

【问题描述】：

我尝试在 div 内进行平滑滚动，我几乎完成了所有操作，但我遇到了一些问题。当我单击链接滚动移动到位置但滚动偏移量是首页。另一个问题是我可以在同一个链接中单击 2 次并且滚动正在跳跃？

有人知道怎么解决吗？

jsfiddle

JS：

$(document).ready(function()
  $('.m_nav a').click(function()
      $('.marken-box').animate(
          scrollTop: $( $.attr(this, 'href') ).offset().top
      , 300);
      return false;
  );
);

html：

<div class="spacer"></div>
<div class="m_nav">
    <a href="#m_a">A</a>
    <a href="#m_b">B</a>
    <a href="#m_c">C</a>
    <a href="#m_d">D</a>
</div>


<div class="marken-box">
    <ul class="marken">
        <li class="slide">
            <span id="m_a">A</span>
        </li>
        <li class="slide">
            <div class="spacer">Lorem</div>
        </li>
        <li class="slide">
            <span id="m_b">B</span>
        </li>
        <li class="slide">
            <div class="spacer">Lorem</div>
        </li>
        <li class="slide">
            <span id="m_c">C</span>
        </li>
        <li class="slide">
            <div class="spacer">Lorem</div>
        </li>
        <li class="slide">
            <span id="m_d">D</span>
        </li>
        <li class="slide">
            <div class="spacer">Lorem</div>
        </li>
    </ul>
</div>

【参考方案1】：

我用过一次.. http://flesler.blogspot.co.il/2007/10/jquerylocalscroll-10.html

如果你喜欢使用插件