jQuery 实现table卷轴移动（How to scroll to specific item using jQuery?）

场景

有这样一个需求，当用户选择特定元素时，需要table表中出现联动的效果。也就是说table表中能够滚动到被选择的特定元素上。
给出一个简单的例子(jsfiddl在线示例）

//HTML
<div>
    <table id="my_table">
        <tr id='row_1'><td>1</td></tr>
        <tr id='row_2'><td>2</td></tr>
        <tr id='row_3'><td>3</td></tr>
        <tr id='row_4'><td>4</td></tr>
        <tr id='row_5'><td>5</td></tr>
        <tr id='row_6'><td>6</td></tr>
        <tr id='row_7'><td>7</td></tr>
        <tr id='row_8'><td>8</td></tr>
        <tr id='row_9'><td>9</td></tr>
    </table>
</div>

//简单的css样式
div {
    width: 100px;
    height: 70px;
    border: 1px solid blue;
    overflow: auto;
}

实现

• 只使用jQuery：

  //scrollTo为实现卷轴效果的被选择元素，可以结合别的需求（如click事件)绑定其他效果。
  var container = $('div'),
      scrollTo = $('#row_8');
  
  container.scrollTop(
      scrollTo.offset().top - container.offset().top + container.scrollTop()
  );
  

  jQuery本身已经将卷轴效果封装成了.scrollTop() 及 .scrollLeft()，他们能将卷轴移动到指定位置。
  但是这样处理的效果比较唐突，被选择元素会直接跳到指定点。于是就有下面更自然平滑效果的处理方式。

• 使用jQuery 和 css animate:

  //200可以设置过渡时间，单位为毫秒。
  container.animate({
      scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()
  }，200);
  

完~