HTML: Hacer que un enlace conduzca al ancla centrado en el medio de la página

Question

Tengo un enlace a un ancla en mi página html. Cuando se hace clic en el enlace, hace que la página se desplace hacia el ancla para que el anclaje esté en la parte superior de la parte visible de la página. ¿Cómo puedo hacer que la página se desplace para que el delimitador esté en el medio de la página?

Answer 1

No hay una forma directa de hacerlo en html \ css puro. Es posible, aunque usando js, ​​obtener la ubicación superior del elemento y establecer la posición superior de la página en la posición de ese elemento menos la mitad de la altura de la página.

Answer 2

Determine qué parte de la página realmente desea en la parte superior y coloque allí el anclaje. No podrá cambiar la forma en que los navegadores interpretan los anclajes, al menos no sin molestar a los usuarios.

Answer 3

Intentaré poner un margen negativo (u otro método de posicionamiento) igual a la mitad de la altura de página en la etiqueta de anclaje de destino.

Answer 4

Dado que "medio de la página" es relativo al tamaño de la pantalla y ventana del usuario en un momento dado, tendrá que usar Javascript para lograr esto, ya que no hay forma en HTML/CSS puro de obtener el ancho de la pantalla vertical.

Answer 5

Firefox admite la configuración de una propiedad de relleno en el ancla nombrada. A partir de ahí, puede establecer una cookie a través de javascript que contenga las dimensiones del navegador, y ajustar su relleno superior en el lado del servidor. Para el usuario final, se vería como su html/css puro, pero el noam es correcto en cuanto a que se necesita un poquito de JS para obtener las dimensiones del navegador, ya que no proporciona esta información sin una pequeña coacción.

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

funcionó bien para mí

Answer 7

he encontrado una solución Anchor Links With A Fixed Header Publicado por Phillip, que es un diseñador de páginas web. Phillip agregó un nuevo tramo VACÍO como posición de anclaje.

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

a continuación, poner el siguiente código CSS

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

Gracias, Phillip!

Answer 8

si quieres sin espacio en blanco hacerlo de esta manera:

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

pero, usted todavía tiene que regular la altura de JavaScript

Answer 9

Mi solución es: colocar un estilo <span class="anchor" id="X"> entonces la clase "ancla" como:

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

gracias al "-50vh" se desplazará el ancla en el medio de la pantalla.

verifique https://www.w3schools.com/cssref/css_units.asp para obtener más información.