página - link html

HTML: hacer un enlace al enlace centrado en el centro de la página

Question

Tengo un enlace a un ancla en mi página html. Cuando se hace clic en el enlace, la página se desplaza hasta el ancla, de modo que el ancla se encuentra 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 centro de la página?

Answer 1

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

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

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

Answer 2

Determine qué parte de su página desea realmente 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 los usuarios.

Answer 3

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

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

A continuación, coloque 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 4

Extendiendo la respuesta de charles.cc.hsu , podemos hacer esto para elementos de altura arbitraria usando la unidad CSS vh , 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 se admite en IE9 y superiores, por lo que es bastante seguro de usar.

Answer 5

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

Answer 6

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 de destino.

Answer 7

No hay una forma directa de hacer esto en html / css puro. Es posible, a través de 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 8

Si quieres sin espacio en blanco hazlo así:

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

pero, todavía tendrás que regular la altura de javascript

Answer 9

Ya que "la mitad 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 la pantalla vertical anchura.

Answer 10

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í