HTML: Fare un collegamento porta all'ancora centrata nel mezzo della pagina

Question

Ho un collegamento ad un ancoraggio sulla mia pagina html. Quando si fa clic sul collegamento, la pagina scorre fino all'ancora in modo che l'ancoraggio si trovi nella parte superiore della parte visibile della pagina. Come posso far scorrere la pagina in modo che l'ancoraggio si trovi nel mezzo della pagina?

Answer 1

Non esiste un modo semplice per farlo in puro html \ css. È possibile usando js, ​​ottenendo la posizione superiore dell'elemento e impostando la posizione superiore della pagina sulla posizione di quell'elemento meno la metà dell'altezza della pagina.

Answer 2

Determina quale parte della tua pagina desideri effettivamente in alto e posiziona l'ancora lì. Non sarai in grado di cambiare il modo in cui i browser interpretano le ancore - almeno non senza sconvolgere gli utenti.

Answer 3

Vorrei provare a mettere un margine negativo (o altro metodo di posizionamento) uguale alla metà dell'altezza della pagina sul tag di ancoraggio di destinazione.

Answer 4

Poiché "il centro della pagina" è relativo alla dimensione della schermata e della finestra dell'utente in un dato momento, è necessario utilizzare Javascript per ottenere ciò, poiché non vi è alcun modo in puro HTML/CSS per ottenere la larghezza dello schermo verticale.

Answer 5

Firefox supporta l'impostazione di una proprietà padding-top sull'ancora denominata. Da lì, puoi impostare un cookie tramite javascript che contiene le dimensioni del browser e regolare il padding-top di conseguenza sul lato server. Per l'utente finale, sembrerebbe il suo puro html/css, ma noam è corretto in quanto è necessario un pochino di JS per ottenere le dimensioni del browser, dal momento che non ti dà questa informazione senza un po 'di coercizione.

Answer 6

html:

<a id="anchor">NEWS</a> 

css:

#anchor{ 
position: relative; 
padding-top: 100px; //(whatever distance from the top of the page you want) 
} 

funzionato bene per me

Answer 7

ho trovato una soluzione Anchor Links With A Fixed Header pubblicato da Phillip, è un web designer. Phillip ha aggiunto un nuovo intervallo EMPTY come posizione di ancoraggio.

<span class="anchor" id="section1"></span> 
<div class="section"></div> 

quindi inserire il seguente codice css

.anchor{ 
    display: block; 
    height: 115px; /*same height as header*/ 
    margin-top: -115px; /*same height as header*/ 
    visibility: hidden; 
} 

Grazie, Filippo!

Answer 8

se si vuole, senza spazio vuoto fare in questo modo:

<h2 id="jump_tag" style="padding-top: 500pt; margin-top: -500pt;"></h2>

ma, avrai ancora di regolare l'altezza da JavaScript

Answer 9

La mia soluzione è: luogo uno stile <span class="anchor" id="X"> poi la classe "anchor" come:

.anchor { 
position:absolute; 
transform:translateY(-50vh); 
} 

grazie al "-50vh" scorre l'ancora nel mezzo dello schermo.

controllare https://www.w3schools.com/cssref/css_units.asp per ulteriori informazioni.