Enlaces de anclaje con un encabezado fijo (anchor links)

Enlaces de anclaje con un encabezado fijo (anchor links)

Para solucionar el problema de los enlaces de anclaje con un encabezado fijo (anchor links), que nos trae a muchos desarrolladores de proyectos, debemos hacer lo siguiente:

Debemos de crear el enlace de la siguiente manera:

<a href="#estudio-y-presupuesto">Estudio y presupuesto</a>

Luego debemos hacer la llamada a la sección de la misma página dentro del mismo contenido:

<a class="anchor" name="estudio-y-presupuesto"></a>

Y por último debemos añadir la clase anchor al nuestro css de la siguiente forma:

.anchor{
  display: block;
  height: 115px; /*misma altura que el header fijo*/
  margin-top: -115px; /*misma altura que el header fijo*/
  visibility: hidden;
}

 

Recientes