Hedef Öğenin dinamik kenar boşluğuna sahip olduğunu söyleyen "Anchorlink" deyin.

Question

Biraz "büyük" Sorunum var ve nasıl çözüleceğini bilmiyorum. i margin-top ile bir elemana atlar bir çapa sahip bir bağlantı varsa

, marj aşağıdaki örnekte olduğu gibi "ihmal" olduğu:

http://jsfiddle.net/T38uk/

i marjı ile bir div varsa

http://jsfiddle.net/eG2Gd/

o olduğunu çapa söylemek mümkün mü: -üst "0" ve dinamik çapa aşağıdaki örnekte olduğu gibi "eski" konumuna atlar, bazı margin-top orada eklendi olacak = Hedef öğede dinamik olarak değiştirilen bir kenar boşluğu mu?

HTML (jQuery Plugin dahildir "scrollAnimate")

body { 
    height: 8000px;   
} 

.link { 
    display: block; 
} 

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

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

JS

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

CSS

$(document).ready(function() { 

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

}); 

Teşekkür: Burada

tek Kod parçacıkları şunlardır sen fo yardımın.

Answer 1

bir çözüm elementin geçerli konuma kaydıran bir jQuery işlevi, ARTI bunu bekliyoruz piksel sayısı ile normal bir bağlantı tıklama eylemini değiştirmek şeklinde olur aşağı Taşınacak:

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

Çapa, div için olan kenar boşluğunun en üstüne işaret edecek şekilde bağlanamayacaksınız çünkü bu, div ile bağlantı kuruyor ve kenar boşluğu yalnızca divunuzun üstünde bir boşluk. Ya Blazemonger'ın önerdiği gibi bir şeyler yapman gerekecek, ya da onunla bağlantı kurmak ve bağlantı kurmak istediğiniz div etrafında bir div yaratmanız gerekecek. Örneğin

:

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

ve CSS: En anwser için

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

http://jsfiddle.net/FchLX/