通过单击表行将表行滚动到div的顶部

Question

基本上，我有一个包含许多行的表。 我想做的就是将我单击的行滚动到包含表格的div顶部。

这是我开始的StackOverflow问题： 如何以编程方式将表格滚动到特定的tr

基本上，此人可以通过手动输入第n个子代号来使表跳至所需的表行：

var s = $("table tbody > tr:nth-child(20)").position();
$( "div" ).scrollTop( s.top );

这是他致力于显示的小提琴，用于手动设置代码中的nth-child： http : //jsfiddle.net/4Z7Z9/

这是我更改代码的方式 ：

function scrollThisToTop(row) {
    var s = $("table tbody > tr:nth-child(" + row + ")").position();
    $( "div" ).scrollTop( s.top );
}

这是我正在研究的小提琴： http : //jsfiddle.net/4Z7Z9/210/

任何帮助，不胜感激！

Answer 1

我能够通过3个简单的步骤使其工作。 在此处检出解决方案

您需要为包含的div添加点击功能以及ID。

新功能：

function scrollThisToTop(row) {

  // Get the id of the row
  var myElement = row.id;

  // Get the variable for the top of the row
    var topPos = row.offsetTop;

  // The container div top to the row top
  document.getElementById('container').scrollTop = topPos;

}

点击功能：

$('tr').on("click", function () {
    scrollThisToTop(this);
});

div ID：

<div id="container">

Answer 2

这对您有帮助吗？

$('table tr').bind('click', function() {
   var s = $('table').position();
   $('div').scrollTop(s);
});