Position() 未返回预期位置答案

【问题标题】：Position() not returning expected positionPosition() 未返回预期位置
【发布时间】：2016-02-12 01:28:53
【问题描述】：

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

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

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

点击“周四 02/11”。 它会滚动到正确的位置。
单击“星期五 02/12”。 它不会滚动到正确的位置。

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

单击“星期五 02/12”。 它会滚动到正确的位置。
点击“周四 02/11”。 它一直滚动到顶部 - 超过正确的位置。

我的问题： 有人可以解释为什么我没有得到准确的定位以及如何纠正这个问题吗？我已经阅读了 scrolltop、position 和 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; }

谢谢！

【问题讨论】：

如果你包含 jQuery，它可以正常工作 -> jsfiddle.net/4rm39m79/2
您忘记包含 JQuery 库。
感谢您的收获。我确实忘记包含库并更新了我的问题并更正了 jsfiddle。

标签： jquery css jquery-animate scrolltop

【解决方案1】：

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

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

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

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

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

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。

【讨论】：