Question

我使用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并执行以下操作：

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

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

点击“星期五02/12”。 滚动到正确的位置。
点击“Thu 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; }

谢谢！

Answer 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。

Position（）没有返回预期的位置

1 个答案: