положения() не возвращает позиции ожидается

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 и сделайте следующее:

1. Нажмите на "Thu 02/11". Он прокручивается в правильное положение.
2. Нажмите «Пт 02/12». Не прокручивается до нужного положения.

Вот еще один пример, после запуска сценария снова:

1. Нажмите на "Fri 02/12". Он прокручивается в правильное положение.
2. Нажмите «Чт 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

Я нашел решение, сыграв с кодом немного больше.

То, что я не понимал, заключалось в том, что позиция моих элементов менялась при каждом нажатии. Я сделал предположение, что начальная позиция осталась прежней, так как не было перезагрузки страницы.

Однако при каждом щелчке положение элементов изменялось относительно родительского элемента с позиционированием.

Поэтому мне нужно было захватить исходные позиции и посмотреть их на каждый клик, или захватить новую позицию и оживить 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); 

}); 

Вот new jsfiddle with the working code.