Sagen Sie "Anchorlink", dass das Target-Element dynamischen Rand erhalten hat-top

Question

Ich habe ein kleines "großes" Problem und weiß nicht, wie ich es lösen soll.

Wenn ich einen Link mit einem Anker, die mit margin-top auf ein Element springt, wird die Marge wie im folgenden Beispiel „ignoriert“:

http://jsfiddle.net/T38uk/

Wenn ich ein div mit Rand haben

http://jsfiddle.net/eG2Gd/

ist es möglich, den Anker zu sagen, dass es: -top = „0“, und es wird einige margin-top, der Anker springt auf den „alten“ Position wie im folgenden Beispiel dynamisch hinzugefügt ein dynamisch geänderter Rand auf dem Zielelement?

Hier sind die einzelnen Code-Schnipsel:

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 (die "scrollAnimate" jQuery Plugin enthalten ist)

$(document).ready(function() { 

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

}); 

Thank du fo r deine Hilfe.

Answer 1

Eine Lösung wäre, den normalen Link klicken Aktion mit einem jQuery-Funktion zu ersetzen, die die aktuelle Position des Elements scrollt, plus die Anzahl der Pixel, die Sie erwarten, dass es nach unten bewegt werden:

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

Sie werden nicht in der Lage sein, den Anker zu bekommen, um auf das obere Ende des Randes für das div zu zeigen, weil es mit dem div verlinkt und der Rand nur Abstand über Ihrem div ist. Entweder musst du etwas wie Blazonger vorschlagen oder ein div um das div erstellen, mit dem du verlinken willst.

Zum Beispiel:

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

und die CSS:

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

http://jsfiddle.net/FchLX/