jQuery Remain at the top of an open collapsible table row when clicked

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

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