javascript - 如何将选定的 设置为滚动条顶部的动画

Question

如何使用 jQuery 将所选行动画设置到 div 顶部，并使用以下滚动条样式:

#sc {
    border:1px solid black;
    width:450px;
    height:80px;
    overflow:scroll;
}

<div id="sc">
  <table id="myTable" border="1">
    <th style="width:100px;">Camp No</th>
    <th style="width:140px;">Lat</th>
    <th style="width:140px;">long</th>
    <tbody>
      <tr></tr>
    </tbody>
  </table>
</div>

这是我的 JavaScript 代码:

google.maps.event.addListener(marker, 'click', function () {
  $('tr.highlighted').removeClass('highlighted');
  $('tr.' + this.id).addClass('highlighted');

  $('tr.' + this.id).animate({
    scrollTop: $('div')[0].scrollHeight
  }, 0);
});

    

Answer 1

我注意到一些事情:

1) 类名不能以数字开头(也许更合适的解决方案是使用 id 而不是 class 来标识行)。

使用类的示例:

$('.C' + this.id).addClass('highlighted');

带有 ID 的示例:

$('#' + this.id).addClass('highlighted');

2)要使滚动正常工作，您需要获取要显示的实际行的偏移量。

$('#sc').scrollTop( $('.C' + this.id).offset().top);

fiddle :

http://jsfiddle.net/6yhP3/5/