js实现滚动条滚动到某个位置便自动定位某个tr-前端开发

实现滚动条滚动到某个位置便自动定位某个tr，可以使用jQuery库中的scrollTop和offset方法，以下是详细的步骤：

实现滚动条滚动到某个位置便自动定位某个tr，可以使用jQuery库中的scrollTop和offset方法，以下是详细的步骤：

步骤一：获取需要定位到的元素

首先，需要获取需要定位到的元素，可以使用jQuery中的选择器（如id、class、属性等）选中此元素。例如：

var $targetTr = $('#target-tr');

上述代码使用了id选择器#target-tr获取了需要定位到的元素，即id为target-tr的tr元素。

步骤二：计算需要滚动的距离

接下来，需要计算需要滚动的距离，也就是目标元素到顶部的距离，可以使用offset方法获取目标元素距离文档顶部的距离。例如：

var targetTop = $targetTr.offset().top;

上述代码中，$targetTr.offset().top即为目标元素距离文档顶部的距离。

步骤三：实现滚动条滚动

最后，可以使用scrollTop方法实现滚动条滚动到目标位置。例如：

$('html, body').animate({
  scrollTop: targetTop
}, 1000);

上述代码中，$('html, body')选中了文档的html和body元素，然后使用animate方法实现滚动动画，将滚动条滚动到目标位置targetTop处，动画时长为1000毫秒（即1秒）。

示例说明

以下是两个示例，第一个示例演示了如何点击按钮滚动到目标元素位置，第二个示例演示了如何滚动条滚动自动定位到某个tr元素。

示例一：点击按钮滚动到目标元素位置

HTML代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Scroll to target element</title>
</head>
<body>
  <p>这是页面上的一堆文字</p>
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>地址</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>22</td>
        <td>男</td>
        <td>北京市海淀区</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>25</td>
        <td>女</td>
        <td>上海市浦东新区</td>
      </tr>
      <tr id="target-tr">
        <td>王五</td>
        <td>20</td>
        <td>男</td>
        <td>广州市天河区</td>
      </tr>
      <tr>
        <td>赵六</td>
        <td>30</td>
        <td>女</td>
        <td>深圳市南山区</td>
      </tr>
    </tbody>
  </table>
  <button id="scroll-to-target">滚动到目标位置</button>

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(function() {
      $('#scroll-to-target').on('click', function() {
        var targetTop = $('#target-tr').offset().top;
        $('html, body').animate({
          scrollTop: targetTop
        }, 1000);
      });
    });
  </script>
</body>
</html>

上述代码中，首先在目标tr元素上添加了一个id为target-tr，然后在页面最下方添加了一个按钮，点击该按钮即可实现滚动条滚动到目标位置。

JavaScript代码中，选中了按钮元素，并为其绑定了一个click事件，当用户点击该按钮时，执行回调函数，计算目标元素距离顶部的距离targetTop，然后使用animate方法实现滚动动画，将滚动条滚动到目标位置targetTop处，动画时长为1000毫秒。

示例二：滚动条自动定位到某个tr元素

HTML代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Auto scroll to target tr</title>
  <style>
    .scroll-container {
      height: 200px;
      overflow-y: scroll;
    }
  </style>
</head>
<body>
  <p>这是页面上的一堆文字</p>
  <div class="scroll-container">
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>地址</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>张三</td>
          <td>22</td>
          <td>男</td>
          <td>北京市海淀区</td>
        </tr>
        <tr>
          <td>李四</td>
          <td>25</td>
          <td>女</td>
          <td>上海市浦东新区</td>
        </tr>
        <tr>
          <td>王五</td>
          <td>20</td>
          <td>男</td>
          <td>广州市天河区</td>
        </tr>
        <tr>
          <td>赵六</td>
          <td>30</td>
          <td>女</td>
          <td>深圳市南山区</td>
        </tr>
        <tr>
          <td>孙七</td>
          <td>18</td>
          <td>男</td>
          <td>重庆市渝北区</td>
        </tr>
        <tr>
          <td>周八</td>
          <td>28</td>
          <td>女</td>
          <td>天津市滨海新区</td>
        </tr>
        <tr>
          <td>钱九</td>
          <td>23</td>
          <td>男</td>
          <td>河南省洛阳市</td>
        </tr>
        <tr>
          <td>吴十</td>
          <td>21</td>
          <td>女</td>
          <td>山东省青岛市</td>
        </tr>
        <tr>
          <td>雷霆</td>
          <td>25</td>
          <td>男</td>
          <td>北京市朝阳区</td>
        </tr>
        <tr>
          <td>朱茜</td>
          <td>23</td>
          <td>女</td>
          <td>上海市闵行区</td>
        </tr>
        <tr>
          <td>夏明</td>
          <td>28</td>
          <td>男</td>
          <td>广州市番禺区</td>
        </tr>
        <tr>
          <td>张梓琳</td>
          <td>25</td>
          <td>女</td>
          <td>深圳市福田区</td>
        </tr>
        <tr>
          <td>林黛玉</td>
          <td>20</td>
          <td>女</td>
          <td>杭州市西湖区</td>
        </tr>
        <tr id="target-tr">
          <td>贾宝玉</td>
          <td>22</td>
          <td>男</td>
          <td>苏州市吴中区</td>
        </tr>
        <tr>
          <td>王熙凤</td>
          <td>27</td>
          <td>女</td>
          <td>南京市鼓楼区</td>
        </tr>
        <tr>
          <td>薛宝钗</td>
          <td>23</td>
          <td>女</td>
          <td>西安市碑林区</td>
        </tr>
      </tbody>
    </table>
  </div>

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(function() {
      var $scrollContainer = $('.scroll-container');
      var $targetTr = $('#target-tr');

      $scrollContainer.on('scroll', function() {
        var scrollTop = $scrollContainer.scrollTop();
        var containerHeight = $scrollContainer.height();
        var targetTop = $targetTr.offset().top - $scrollContainer.offset().top;

        if (targetTop < scrollTop || targetTop > scrollTop + containerHeight) {
          $scrollContainer.animate({
            scrollTop: targetTop
          }, 500);
        }
      });
    });
  </script>
</body>
</html>

上述代码中，首先使用了一个div元素作为滚动容器，将表格元素放入其中。在表格中添加了多个tr元素，并为其中一个tr元素添加了一个id为target-tr，即需要自动定位的目标元素。

JavaScript代码中，首先选中了滚动容器元素和目标元素，并为滚动容器元素绑定了一个scroll事件，当滚动条滚动时，执行回调函数。

在回调函数中，通过scrollTop方法获取滚动条距离容器顶部的距离scrollTop，通过height方法获取容器高度containerHeight，再通过offset方法获取目标元素距离容器顶部的距离targetTop，最后判断目标元素是否在可视区域内，如果不在则使用animate方法实现滚动动画，将滚动条滚动到目标位置targetTop处，动画时长为500毫秒。