Question

我在div中有一个表（它是溢出的，所以浏览器呈现滚动条）。使用JavaScript，如何将轨道上的滚动条手柄移动到与表格中某一行的位置相对应的位置？

+--------------------------------------+
|100                               |   |
|101                               |   |
|102                               |   |
|103                               |   |
|104                               |   |
|105     This is a table that      |---|
|106        has overflowed.        | - |  <-- I want to move this using JavaScript,
|107                               |---|      so that a specific row # is visible.
|108                               |   |
|109                               |   |
|110                               |   |
|111                               |   |
+--------------------------------------+

Answer 1

如果您想使用非jQuery way，请使用包含表scrollTop property。

让我们假设您可以使用ID以及包含<div />的内容轻松识别要滚动到的行。使用您要滚动到的元素的offsetTop。

var container = document.getElementById('myContainingDiv');
var rowToScrollTo = document.getElementById('myRow');

container.scrollTop = rowToScrollTo.offsetTop;

Answer 2

您可以使用：

$('a').on('click', function(e){
  var t = this.id.substring(1);
  e.preventDefault();
  var target= $(".section")[t] ;
  var offset = $( target ).offset();
  $('html, body').stop().animate({
    scrollTop: offset.top
  }, 1000);
});

另外，您可以查看example on jsfiddle 。

Answer 3

使用Jquery：

'。scroll-table'是用于可滚动部分的类名

1.首先进入初始位置

$('.scroll-table').scrollTop(0);

2.Below line计算表格顶部位置和我们滚动的行之间的滚动差异

$('.scroll-table').scrollTop($('#myrowid').position().top-$('.scroll-table').position().top);

Answer 4

如果您对jQuery感兴趣，可以按照以下步骤进行操作：

$(".tableClass tbody").scrollTop(0);

Answer 5

您还可以使用.scrollTop() jQuery方法：

https://api.jquery.com/scrollTop/

Answer 6

使用AngularJs有一个解决方案。

  $document.scrollTopAnimated(50, 1000).then(function () {});

第一个参数是位置。第二个是动画的持续时间。

设置滚动条位置

6 个答案: