Say "Anchorlink" that Target Element got dynamic margin-top

Question

I have a little "big" Problem and don't know how to resolve.

If i have an link with an anchor that jumps to an element with margin-top, the margin is "ignored" like in the following example:

http://jsfiddle.net/T38uk/

If i have an div with margin-top="0" and there will dynamically added some margin-top, the anchor jumps to the "old" position like in the following example:

http://jsfiddle.net/eG2Gd/

Is it possible to tell the anchor that there is a dynamically changed margin on the target element?

Here are the single Code snippets:

HTML

<a href="#testanchor" class="link">Testanchor</a>
<div id="zwischenelement"></div>
<div id="testanchor">Hier muss der Anker hinspringen</div>​

CSS

body {
   height: 8000px;        
}

.link {
   display: block;
}

#zwischenelement {
   height: 200px;
   background-color: grey;    
}

#testanchor {
   margin-top: 40px;  
   background-color: red;
   padding:15px;   
}​

JS (the "scrollAnimate" jQuery Plugin is included)

$(document).ready(function() {

$('#testanchor').scrollAnimate({
    startScroll: 0,
    endScroll: 100,
    cssProperty: 'margin-top',
    before: 0,
    after: 40
});

});

Thank you for your help.

Answer 1

One solution would be to replace the normal link click action with a jQuery function which scrolls to the element's current position, PLUS the number of pixels you expect it to be moved down:

$('a[href^=#]').on('click',function(e) {
    e.preventDefault();
    $(document).scrollTop($('#testanchor').position().top+40); 
    // 40 pixels is specific to this case
});

http://jsfiddle.net/mblase75/eG2Gd/2/