Dire "Anchorlink" che Target Element ha un margine dinamico in primo piano

Question

Ho un piccolo problema "grande" e non so come risolvere.

se ho un legame con un'ancora che salta ad un elemento con margin-top, il margine è "ignorata", come nel seguente esempio:

http://jsfiddle.net/T38uk/

se ho un div con margine -top = "0" e ci saranno dinamicamente aggiunto un po 'margin-top, l'ancora salta alla posizione di "vecchio", come nel seguente esempio:

http://jsfiddle.net/eG2Gd/

e' possibile dire l'ancora che ci sia un margine modificato in modo dinamico sull'elemento obiettivo?

Qui ci sono i singoli frammenti di codice:

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 (il "scrollAnimate" jQuery plugin è incluso)

$(document).ready(function() { 

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

}); 

Grazie tu per r il tuo aiuto.

Answer 1

Una soluzione potrebbe essere quella di sostituire la normale azione di collegamento clic con una funzione di jQuery, che scorre alla posizione attuale dell'elemento, più il numero di pixel che si aspetta che sia spostato verso il basso:

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

Answer 2

Non sarai in grado di far puntare il punto di ancoraggio alla parte superiore del margine per il div perché si collega al div e il margine si trova solo al di sopra del div. O avrai bisogno di fare qualcosa come Blazemonger suggerito, o creare un div intorno al div a cui vuoi collegarti e collegarlo.

Ad esempio:

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

e CSS:

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

http://jsfiddle.net/FchLX/