HTML: creare un collegamento conduce all'ancoraggio centrato al centro della pagina

Question

Ho un link ad un'ancora sulla mia pagina html. Quando si fa clic sul collegamento, la pagina scorre fino all'ancoraggio 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 sia al centro della pagina?

Answer 1

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

Answer 2

Ho trovato una soluzione Collegamenti di ancoraggio con intestazione fissa pubblicato da Phillip, è un web designer. Phillip ha aggiunto una nuova apertura EMPTY come posizione di ancoraggio.

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

quindi inserisci il seguente codice css

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

Grazie, Phillip!

Answer 3

html:

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

css:

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

ha funzionato bene per me

Answer 4

Posiziona un <span class="anchor" id="X"> quindi dai uno stile alla classe anchor come:

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

Con -50vh l'ancora scorrerà al centro dello schermo.

Answer 5

se vuoi senza spazi vuoti fallo in questo modo:

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

ma dovrai comunque regolare l'altezza da javascript

Answer 6

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

Answer 7

Dal " metà della pagina " è relativo alla dimensione dello schermo e della finestra dell'utente in un dato momento, dovrai usare Javascript per raggiungere questo obiettivo, poiché non è possibile in HTML / CSS puro ottenere la larghezza dello schermo verticale.

Answer 8

Estendendo la risposta di charles.cc.hsu , possiamo farlo per elementi di altezza arbitraria usando <= > Unità CSS, che è relativa all'altezza del viewport.

HTML:

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

CSS:

.anchor{
    display: block;
    height: 50vh; /* 50% viewport height */
    margin-top: -50vh;
    visibility: hidden;
}

vh è supportato in IE9 e versioni successive, quindi è abbastanza sicuro da usare.

Answer 9

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

Answer 10

Firefox supporta l'impostazione di una proprietà padding-top sull'ancora con nome. Da lì, è possibile impostare un cookie tramite javascript che contenga le dimensioni del browser e regolare la parte superiore del padding di conseguenza sul lato server. Per l'utente finale, sembrerebbe il suo puro html / css, ma noam è corretto in quanto è necessario un po 'di JS per ottenere le dimensioni del browser, dal momento che non fornisce queste informazioni senza un po' di coercizione.