Почему position (). Top возвращает неверное значение во второй таблице?

Question

У меня есть две таблицы в первой таблице, ее возвращаемая позиция (). Top отлично, но когда я нажимаю на вторую таблицу, тогда ее возвращаемое значение такое же, как и в первой таблице, как я могу это исправить?

Почему обе таблицы position (). top вернуть то же самое?

$(function() {
  $('tr').click(function() {
    offsetTop = $(this).position().top;
    console.log(offsetTop);
  });
});

.myDiv {
  overflow-y: auto;
  height: 250px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<div class="myDiv">
<h2>Table 1</h2>
  <table class="table table-bordered">
   
    <tbody>
      <tr>
        <td>Click here this is first table, its return -1 in console</td>
      </tr>
    </tbody>
  </table>
  
  <h2>Table 2</h2>
  <table class="table table-bordered">
    <tbody>
      <tr>
        <td>Click here this is second table, its also return -1 in console why? how can i fix it? how can i get exactly position of this element?</td>
      </tr>
      
    </tbody>
  </table>
</div>

Answer 1

Я предполагаю, что вы пытаетесь получить top относительно screen top, а не относительно его родителя.

В этом случае вы должны использовать offset() и подструктурировать window.scrollY

$(function() {
  $('tr').click(function() {
    offsetTop = $(this).offset().top - window.scrollY;
    console.log(offsetTop);
  });
});

.myDiv {
  overflow-y: auto;
  height: 250px;
}
#d {
height: 300px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<div id="d"></div>
<div class="myDiv">
<h2>Table 1</h2>
  <table class="table table-bordered">
   
    <tbody>
      <tr id="2">
        <td>Click and see how its top changed with scroll</td>
      </tr>
    </tbody>
  </table>
  
  <h2>Table 2</h2>
  <table class="table table-bordered">
    <tbody>
      <tr>
        <td>See how its top changed with scroll</td>
      </tr>
      
    </tbody>
  </table>
</div>

Answer 2

Вы можете получить table position и сумму с tr position, фактически, position() позиция возвращаемого элемента зависит от собственной родительской позиции.

$(function() {
  $('tr').click(function() {
    offsetTop = $(this).position().top;
    offsetTopParent = $(this).parents('table').position().top;
    
    //console.log(offsetTop); // return tr offset
    //console.log(offsetTopParent); // return table offset
    console.log(offsetTop + offsetTopParent);
  });
});

.myDiv {
  overflow-y: auto;
  height: 250px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<div class="myDiv">
  <h2>Table 1</h2>
  <table class="table table-bordered">

    <tbody>
      <tr>
        <td>Click here this is first table, its return -1 in console</td>
      </tr>
    </tbody>
  </table>

  <h2>Table 2</h2>
  <table class="table table-bordered">
    <tbody>
      <tr>
        <td>Click here this is second table, its also return -1 in console why? how can i fix it? how can i get exactly position of this element?</td>
      </tr>
      <tr>
        <td>Click here this is second table, its also return -1 in console why? how can i fix it? how can i get exactly position of this element?</td>
      </tr>
    </tbody>
  </table>
</div>