"एंकरलिंक" कहें कि लक्ष्य तत्व को डायनामिक मार्जिन-टॉप

Question

मिला है, मेरे पास थोड़ा "बड़ा" समस्या है और यह नहीं पता कि कैसे हल किया जाए।

तो मैं एक लंगर है कि मार्जिन टॉप के साथ एक तत्व के लिए कूदता के साथ एक लिंक है, मार्जिन की तरह "अनदेखा" कर रहा है निम्न उदाहरण में:

http://jsfiddle.net/T38uk/

मैं मार्जिन के साथ एक div है, तो -top = "0" और वहाँ गतिशील रूप से कुछ मार्जिन टॉप, जोड़ा जाएगा लंगर निम्नलिखित उदाहरण की तरह "पुराने" स्थिति के लिए कूदता है:

http://jsfiddle.net/eG2Gd/

यह लंगर बताने के लिए है कि वहाँ संभव है लक्ष्य तत्व पर एक गतिशील रूप से परिवर्तित मार्जिन?

एचटीएमएल

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

सीएसएस

body { 
    height: 8000px;   
} 

.link { 
    display: block; 
} 

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

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

जे एस ("scrollAnimate" jQuery प्लगइन शामिल किया गया है)

$(document).ready(function() { 

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

}); 

धन्यवाद:

यहाँ एक कोड के टुकड़े कर रहे हैं आप के लिए आपकी मदद करो।

Answer 1

एक समाधान एक jQuery समारोह जो तत्व की वर्तमान स्थिति के लिए स्क्रॉल, प्लस पिक्सल आप यह उम्मीद की संख्या के साथ सामान्य लिंक क्लिक कार्रवाई को बदलने के लिए होगा नीचे ले जाया जा रहे हैं:

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

आप div के लिए मार्जिन के शीर्ष पर इंगित करने के लिए एंकर प्राप्त करने में सक्षम नहीं होंगे क्योंकि यह div से जुड़ रहा है और मार्जिन केवल आपके div से ऊपर है। या तो आपको Blazemonger की तरह कुछ करने की आवश्यकता होगी, या उस div के चारों ओर एक div बनाओ जिसे आप लिंक करना चाहते हैं और उससे लिंक करना चाहते हैं।

उदाहरण के लिए:

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

और सीएसएस:

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

http://jsfiddle.net/FchLX/