jQuery保留在打开的可折叠表格顶部点击时

Question

在理想的世界中，我不想为此使用表格，但对于如此强大的数据表格的布局来说，它是理想的选择。无论如何，当用户点击某个部分的标题时，我想让windwo保留在该部分的顶部，而不是在现在打开的部分的底部。 JavaScript的我在那里有目前：

$(document).ready(function() { 
 
    $('tr.parent').next('tr.child').hide(); 
 
    $('a.toggle').on('click', function (e) { 
 
     e.preventDefault(); 
 
     var $this = $(this), 
 
      $child = $this.closest('tr.parent').next('tr.child'); 
 
     $this.closest('tr.parent').siblings('tr.child').not($child).hide(); 
 
     $child.toggle(); 
 
    }) 
 
});

我已经创建了一个Fiddle Here所以你可以看到HTML表打开/使用JavaScript关闭，但只需要在如何保持的帮助点击并打开时滚动到该标题/部分顶部的内容。

http://jsfiddle.net/aaronblomberg/jtu49v22/

在此先感谢！一个小提琴的例子会是理想的！

Answer 1

这里是一个动画滚动，将让你开始：

$('a.toggle').on('click', function (e) { 
    e.preventDefault(); 

    var $this = $(this), 
     $child = $this.closest('tr.parent').next('tr.child'); 
    $this.closest('tr.parent').siblings('tr.child').not($child).hide(); 
    $child.toggle(); 
    // scroll heading to page top with arbitrary 60px difference 
    var top = $this.offset().top -60;   
    $('html,body').animate({scrollTop: top}) 
}); 

DEMO