单击时，jQuery保留在可折叠表行的顶部

Question

In an ideal world i didn't want to use a table for this but it proved ideal for the layout for such an intense data table. Anyhow, when the user clicks on the a header of a section i want the windwo to remain at the top of that section and not at the bottom of the section that is now opened. The javascript i have in there currently is:

 $(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(); }) }); 

I've created a Fiddle Here so you can see the html table opening/closing with the javascript, but just need help on how to keep the content to scroll to the top of that header/section when clicked on and opened.

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

thanks in advance! a fiddle example back would be ideal!

Answer 1

Here's an animated scroll that would get you started:

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