Position() 未返回预期位置

Question

我使用在 this site 上找到的代码来创建以下代码，以便在 table 中平滑滚动：

    $('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() 并不总是 return 正确滚动文档的正确位置。

例如，如果您转到 jsfiddle 并执行以下操作：

点击 "Thu 02/11"。 它滚动到正确的位置。
点击 "Fri 02/12"。 它没有滚动到正确的位置。

这是您再次运行脚本后的另一个示例：

点击 "Fri 02/12"。 它滚动到正确的位置。
点击 "Thu 02/11"。 它一直滚动到顶部 - 超过了正确的位置。

我的问题： 有人可以解释为什么我没有得到准确的定位以及如何解决这个问题吗？我已经阅读了 scrolltop, position, and offset 上的文档，但显然有一些我不理解或遗漏的地方。

这是我正在使用的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>

还有我的CSS：

#schedule-container { position: relative; }
table { border: 1px solid black; }
tbody {
    display: block;
    height: 200px;
    overflow-y: scroll;
}
tr:nth-child(even) { background: #CCC; }
td { width: 200px; }

谢谢！

Answer 1

我通过多玩代码找到了解决方案。

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

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

因此，我要么需要捕获原始位置并在每次单击时查找这些位置，要么捕获新位置并根据当前位置和新位置的位置设置滚动条动画。我不确定我是否解释得很好，所以...

下面是使 table 滚动到正确位置的代码：

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

});

这里是new jsfiddle with the working code。

Position() 未返回预期位置

Position() not returning expected position

css

jquery

scrolltop

jquery-animate