CSS: dar un margen a un enlace anchor para que no aparezca en la parte superior de la página.

Un “Anchor” (ancla) en HTML es un enlace que permite enlazar partes de un documento. La idea es sencilla, en el destino del enlace, el href, ponemos #etiqueta. Esa etiqueta tiene que es el id de una zona del documento a la que queremos enlazar.

Por ejemplo, si ponemos:

<a href:"#loquesea">Al pinchar aquí</a> me lleva a la sección elegida.
-------
--------
<div id="loquesea">Esta es la sección a la que llevará el enlace.</div>

Estos enlaces son muy útiles, y permiten crear documentos muy cómodos para el lector. Por ejemplo un índice que me lleve a las secciones que queremos.

Sin embargo, al llevarte a la sección a la que hemos enlazado, pone dicha sección al comienzo de la página. ¿Qué ocurre si tenemos elementos que cubran la parte superior, o si necesito un margen? Por ejemplo, ¿qué ocurre si tienes un “fixed header“, una cabecera fija? En ese caso, nuestro ancla quedaría debajo de nuestra cabecera. Y no podremos verlo.

Hoy os enseñamos a poner un margen en el enlace, que podremos modificar, y así poder decidir nosotros a la altura que deba aparecer el ancla.

Cómo dar un margen en un enlace ancla, para que aparezca a la altura que queramos de la página.

El truco es muy curioso e ingenioso. Lo hemos probado en un cliente y funciona muy bien. Lo que vamos a hacer es poner un elemento (en el ejemplo ponemos un a pero podría ser cualquier cosa) oculto antes de donde queremos que apunte. Y a ese elemento oculto darle un margen. De esta manera, en un visionado normal de la página no aparecerá. Pero cuando el anchor link nos lleve a él, se activará el margen.

Modifiquemos en ejemplo anterior (la clase y la etiqueta las ponemos nosotros).

HTML

<a href:"#loquesea">Al pinchar aquí</a> me lleva a la sección elegida.
-------
--------

<a class="myanchor" id="loquesea"></a>
<div >Esta es la sección a la que llevará el enlace.</div>

Aquí el CSS:

a.myanchor {
 display: block;
    position: relative;
    top: 200px;
    visibility: hidden;}

Y ya está. Como veis, ese elemento está justo antes del párrafo al que queremos llegar. Y oculto. Pero cuando pinchamos en el link, nos lleva a el con el margen que queremos (podemos ponerlo positivo o negativo.
Nota: seguramente tendréis que hacer alguna “media query” para ajustarlo en móviles.

En teoría hay una variante de este, donde en vez de un elemento ponemos un ::before con un contenido. Y ese lo ponemos oculto. Debería funcionar igual Podéis verlo aquí (no lo hemos probado).