Calculate HTML bookmark smooth-scrolling, relative to a specific parent container

Question

I have looked at all the relevant questions and answers and found most to be incomplete (and not work in this case), so am asking this specific question with a detailed JSFiddle.

I have bookmark anchors deep within a hierarchy, but need to calculate their vertical offset within a specific ancestor in order to smooth scroll to them.

The current offset calculation is currently:

function GetOffset($element, $parent)
{
    return {
        top: $element.offset().top + $parent.scrollTop(),
        left: $element.offset().left + $parent.scrollLeft()
    };    
}

but the scrolling winds up under the selected element instead of showing it.

I made the rest of the sample code as long-winded and obvious as possible.

Update:

I have updated the fiddle to show that the problem is caused by the offset to the scrolling panel. This gives an incorrect offset().top value for the items so I guess the problem lays with my understanding of offset().

JSFiddle: http://jsfiddle.net/TrueBlueAussie/dtYpx/7/

Can someone please tell me how to correctly calculate the offset so this scrolling works? preferably by only adjusting my GetOffset() function.

Answer 1

After sorting out the other issues, the problem was using offset() instead of position() when adding to the scrollTop() of the container.

This now works correctly:

function GetOffset($element, $parent) {
    return {
        top: $element.position().top + $parent.scrollTop(),
        left: $element.position().left + $parent.scrollLeft()
    };
}

JSFiddle: http://jsfiddle.net/TrueBlueAussie/dtYpx/9/