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

StackOverflow https://stackoverflow.com/questions/1418838

  •  07-07-2019
  •  | 
  •  

Pregunta

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 ancla 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 ancla esté en el medio de la página?

¿Fue útil?

Solución 3

No hay una forma directa de hacer esto en html \ css puro. Sin embargo, es posible usar js, obteniendo la ubicación superior del elemento y estableciendo 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.

Otros consejos

Encontré una solución Enlaces de anclaje con un encabezado fijo publicado por Phillip, es diseñador web. Phillip agregó un nuevo tramo VACÍO como posición de anclaje. 

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

luego ponga 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!

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í

Coloque un <span class="anchor" id="X"> luego aplique estilo a la clase anchor como: 

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

Con -50vh el ancla se desplazará en el centro de la pantalla.

si quieres sin espacio en blanco hazlo así:

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

pero, aún tendrá que regular la altura desde javascript

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

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

Extendiéndose de la respuesta de charles.cc.hsu , podemos hacer esto para elementos de altura arbitraria usando el <= > Unidad CSS, que es relativa a la altura de la ventana gráfica.

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 es compatible con IE9 y versiones posteriores, por lo que es bastante seguro de usar.

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

Firefox admite establecer una propiedad padding-top en el ancla con nombre. A partir de ahí, puede configurar una cookie a través de javascript que contenga las dimensiones del navegador, y ajustar su relleno superior en consecuencia del lado del servidor. Para el usuario final, se vería como su puro html / css, pero noam es correcto ya que se necesita un poco de JS para obtener las dimensiones del navegador, ya que no le brinda esta información sin una pequeña coerción.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top