设置滚动条位置答案

【问题标题】：Setting a scrollbar position设置滚动条位置
【发布时间】：2011-04-03 11:53:58
【问题描述】：

我在 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                               |   |
+--------------------------------------+

【问题讨论】：

标签： javascript scrollbar

【解决方案1】：

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

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

第一个参数是位置。第二个是动画的时长。

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

如果你对这里的jQuery感兴趣，你可以这样做：

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

【讨论】：

【解决方案4】：

使用 Jquery：

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

1.先到初始位置

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

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

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

【讨论】：

【解决方案5】：

你可以用这个：

$('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 。

【讨论】：

【解决方案6】：

如果你想去非jQuery way，使用包含表的scrollTop property。

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

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

container.scrollTop = rowToScrollTo.offsetTop;

【讨论】：

如果你有一个固定的标题，链接#方法基本上没用，因为它会覆盖滚动位置的顶部
scrollTop 不受 IE 和 Edge 支持。见caniuse.com/#search=scrolltop
@yuxiaomin 该链接不支持scrollTop。它显示了对scrollBy 和scrollTo 的支持。请参阅有关 scrollTop 的 MDN 文章（包含在我的答案中），其中包含一个支持表，显示 IE 和 Edge 浏览器确实支持它。
@DanHerbert 哦，是的。谢谢！