设置滚动条位置

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 方式，请使用包含表的 scrollTop 属性。

假设您可以使用 ID 以及包含的

轻松识别要滚动到的行。使用 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);
});

另外，你可以检查这个 jsfiddle 上的示例 。

Answer 3

使用Jquery：

'.scroll-table' 是可滚动部分使用的类名

1.首先转到初始位置

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

2.下面一行计算表格顶部位置之间的滚动差异以及我们滚动到的行

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

Answer 4

如果你对这里的 jQuery 感兴趣，可以按如下方式进行：

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

Answer 5

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

https://api.scrollTop()。 jquery.com/scrollTop/

Answer 6

有一个使用 AngularJs 的解决方案。

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

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