Jquery Position（）未返回预期位置

我使用在上找到的代码创建以下代码位，以便在表中平滑滚动：

    $('a[href^="#"]').on('click', function(event) {

       var target = $($(this).attr('href'));
       event.preventDefault();
       var startPoint = $('#schedule-table tbody').position().top;
       $('#schedule-table tbody').animate({
         scrollTop: (target.position().top - startPoint)
       }, 2000);
     });

卷轴很好用。但是，position（）并不总是返回正确的位置以正确滚动文档

例如，如果转到此处并执行以下操作：

点击“2011年2月2日星期四”。它会滚动到正确的位置

点击“2012年2月2日星期五”。它不会滚动到正确的位置

下面是再次运行脚本后的另一个示例：

点击“2012年2月2日星期五”。它会滚动到正确的位置

点击“2011年2月2日星期四”。它会一直滚动到顶部-超过正确的位置

我的问题： 有人能解释为什么我没有得到准确的定位，以及如何纠正这个问题吗？我已经阅读了和上的文档，但显然有些东西我不理解或遗漏

以下是我正在使用的HTML：

<div id="schedule-container">
<div class="schedule-navigation">
  <ul>
      <li>
          <a href="#date-2016-02-10">
            <span class="week-day">Wed</span>
            <span class="date">02/10</span>
            </a>
        </li>
        <li>
      <a href="#date-2016-02-11">
            <span class="week-day">Thu</span>
            <span class="date">02/11</span>
            </a>
        </li>
        <li>
          <a href="#date-2016-02-12">
            <span class="week-day">Fri</span>
            <span class="date">02/12</span>
            </a>
        </li>
    </ul>
</div>
<table id="schedule-table">
  <tbody>
    <tr id="date-2016-02-10">
        <td>2016-02-10
        </td>
    </tr>
    <tr><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr id="date-2016-02-11">
        <td>2016-02-11
        </td>
    </tr>
    <tr><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr id="date-2016-02-12">
        <td>2016-02-12
        </td>
    </tr>
    <tr><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
  </tbody>
</table>
</div>

---

谢谢

我通过进一步使用代码找到了解决方案

我不明白的是我的元素的位置随着每次点击而改变。我假设初始位置保持不变，因为没有重新加载页面

但是，每次单击时，元素的位置都会相对于具有定位的父元素发生变化

因此，我需要捕获原始位置并在每次单击时查找它们，或者捕获新位置并根据当前位置和新位置设置scrolltop动画。我不确定我是否解释得太好了，所以

以下是使表格滚动到正确位置的代码：

currentPosition = 0;

$('a[href^="#"]').on('click', function(event) {

  var target = $($(this).attr('href'));
  event.preventDefault();

  var currentScrollTop = $('#schedule-table tbody').scrollTop();

  currentPosition = target.position().top;
  $('#schedule-table tbody').animate({
    scrollTop: (currentPosition + currentScrollTop)
  }, 1000);

});

---

这是你的电话号码

如果您包括jQuery，它工作得很好->您忘了包括jQuery库。谢谢您的帮助。我确实忘记了包含库，并且更新了我的问题并更正了JSFIDLE。

currentPosition = 0;

$('a[href^="#"]').on('click', function(event) {

  var target = $($(this).attr('href'));
  event.preventDefault();

  var currentScrollTop = $('#schedule-table tbody').scrollTop();

  currentPosition = target.position().top;
  $('#schedule-table tbody').animate({
    scrollTop: (currentPosition + currentScrollTop)
  }, 1000);

});