एंकर पृष्ठ के शीर्ष पर नहीं है, लेकिन 200px नीचे

Question

मेरे पास एक तत्व पर एक एंकर है जो उस बिंदु पर नेविगेशन कूदता है। हालांकि एंकर इसे व्यूपोर्ट के शीर्ष तक सीधे स्नैप करता है। एक निश्चित नेविगेशन के कारण, अब यह पीछे छिपा हुआ है।

क्या एंकर को व्यूपोर्ट के शीर्ष पर स्नैप नहीं करना और पृष्ठ के नीचे 200px बनाना संभव है?

यहाँ साइट: http://www.haselden.co.uk/james/docs

Answer 1

इसके लिए गंदा समाधान लेकिन काम करता है, धन्यवाद @SteveJenkins इसके साथ आने के लिए, हालांकि मैंने एक चिमटा जोड़ा।

<a name="AnchorName" class="anchor">anchor text [invisible]</a> 

.anchor { 
    position: relative; 
    top: -[number]px; 
    visibility:hidden; 
} 

Answer 2

एक hiden तत्व 200px कम जोड़े और इसके बजाय यह करने के लिए एक लंगर बनाते हैं।

Answer 3

मैं वास्तव में एंकर पर सीएसएस लागू करके इसे हल करने में सक्षम था। तो मैं इस के लिए होता है लंगर के लिए ...

<a name="AnchorName" class="anchor"></a> 

और फिर सीएसएस में मैं इस के लिए होता है ...

.anchor { 
    position: relative; 
    top: -[number]px; 
} 

ध्यान दें कि मैं में कुछ अशुद्धियों देखा है कितनी दूर लंगर है विभिन्न ब्राउज़रों में चले गए। तो चीजों को पूरी तरह से संरेखित करना संभव नहीं हो सकता है। यदि आप इसे पूरी तरह से तैनात करना चाहते हैं तो आपको शायद कुछ फैंसी jquery या कुछ चाहिए।

Answer 4

मुझे एक ही समस्या थी और इस सवाल पर आया। कोई जवाब काम नहीं कर रहा था जैसा मैं चाहता था। मुझे थोड़ा और आगे जाना पड़ा और मेरे निष्कर्ष साझा करना चाहता था।

पहले संदर्भ का थोड़ा सा। मैं कुछ प्रकार की त्रुटि पार्सिंग कर रहा था जो एचटीएमएल द्वारा प्रदत्त स्रोत कोड देखने वाले पेज में दिलचस्प क्षेत्रों को हाइलाइट करता है। त्वरित नेविगेशन के लिए अनुमति देने वाली एक इंडेक्स तालिका है, जो निश्चित ऊंचाई-चरणीय शीर्षलेख में है। जो बताता है कि मैं इस प्रश्न पृष्ठ पर क्यों घायल हुआ।

मेरे समस्या यह थी कि लंगर दृश्य अंतरिक्ष और लेने के आसपास sourcecode चलती, लंगर की दूरी से पाठ स्थानांतरण और कोड स्वरूपण के साथ खिलवाड़ किया गया था। मैंने इसे स्थान नहीं लेने के कई तरीकों की कोशिश की लेकिन अभी भी पृष्ठ में मौजूद है ताकि एंकर काम करता है। अंत में, . (@ noregt की टिप्पणी के अनुसार) के बजाय, मैं  के लिए बस गया जो बैकस्पेस चरित्र होगा।

प्रत्येक एंकर गतिशील रूप से <a name="[some unique name]" class="anchor">&#008;</a> की तरह उत्पन्न होते हैं और फिर निश्चित शीर्षलेख में संदर्भित होते हैं।

जावास्क्रिप्ट का एक छोटा सा गतिशील हैडर ऊंचाई और एंकर स्थिति के साथ मदद करता है (सभी एंकर पकड़ लेता है और गतिशील रूप से शीर्ष गद्दी समायोजित):

<script type="text/javascript"><!-- 
var height = document.getElementById("head").offsetHeight; 
var a = document.getElementsByClassName('anchor'); 
// src: http://stackoverflow.com/questions/9329446/for-each-over-an-array-in-javascript 
for(key in a) { 
    if (a.hasOwnProperty(key) && /^0$|^[1-9]\d*$/.test(key) && key <= 4294967294) { 
     a[key].style.paddingTop = height + 'px'; 
    } 
} 
--></script> 

यह समाधान एक चर-ऊंचाई के साथ गतिशील रूप से उत्पन्न एंकर के लिए पूरी तरह से काम करता है लेकिन निश्चित हेडर। उम्मीद है कि यह किसी और की मदद कर सकता है।

Answer 5

यह CSS3 के साथ अब बहुत आसान है। लंबी व्याख्या यहां है: https://css-tricks.com/hash-tag-links-padding/ लेकिन लघु संस्करण

a::before { 
    display: block; 
    content: " "; 
    margin-top: -70px; 
    height: 70px; 
    visibility: hidden; 
}