Ancora non all'inizio della pagina, ma 200 px in basso

Question

Ho un'ancora su un elemento che fa saltare la navigazione a quel punto. Tuttavia l'ancoraggio lo scatta fino in cima al viewport. A causa di una navigazione fissa, ora è nascosto dietro.

E 'possibile fare in modo che l'ancoraggio non si agganci alla parte superiore del viewport e 200px in fondo alla pagina?

sito qui: http://www.haselden.co.uk/james/docs

Answer 1

Soluzione sporca per questo, ma funziona, grazie @SteveJenkins per aver inventato questo, anche se ho aggiunto un tweak.

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

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

Answer 2

Aggiungi un elemento Hiden 200px inferiore e fa un ancoraggio ad esso, invece.

Answer 3

Sono stato in grado di risolvere questo problema applicando il CSS all'ancora. Così per l'ancora avrei questo ...

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

E poi in CSS avrei questo ...

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

Nota che ho notato alcune imprecisioni in quanto lontano l'ancora è spostato in diversi browser. Quindi potrebbe non essere possibile allineare perfettamente le cose. Probabilmente avresti bisogno di un po 'di jQuery o qualcosa di simile se volessi che fosse perfettamente posizionato.

Answer 4

Ho avuto un problema simile e venne su questa domanda. Nessuna risposta funzionava come volevo. Dovevo andare un po 'oltre e volevo condividere le mie scoperte.

Un po 'di contesto prima. Stavo facendo una sorta di analisi degli errori che evidenziava le aree interessanti in una pagina di visualizzazione codice sorgente resa HTML. C'è una tabella degli indici che consente una navigazione veloce, che si trova in un'intestazione a variabile dell'altezza fissa. Questo spiega perché sono finito su questa pagina di domande.

mio problema era che l'ancora è stata prendendo spazio visivo e spostando il codice sorgente intorno, spostando il testo in base alla lunghezza del ancoraggio e scherzi con formattazione del codice. Ho provato diversi modi per farlo NON occupano spazio ma esistono ancora nella pagina in modo che l'ancoraggio funzioni. Alla fine, invece di un . (come nel commento di @ noregt), ho optato per  che sarebbe il carattere backspace.

Ogni ancore viene generata dinamicamente come <a name="[some unique name]" class="anchor">&#008;</a> e quindi indicata nell'intestazione fissa.

Un po 'di JavaScript aiuta con il posizionamento altezza intestazione dinamica ed ancoraggi (afferra tutte le ancore e regolare il padding superiore dinamicamente):

<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> 

Questa soluzione funziona perfettamente per tasselli generati dinamicamente con altezza variabile ma intestazione fissa. Spero che questo possa aiutare qualcun altro.

Answer 5

Ora è molto più semplice con CSS3. La lunga spiegazione è qui: https://css-tricks.com/hash-tag-links-padding/ ma la versione breve è

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