Comparta un enlace al centro de una página y el encabezado adhesivo, si existe, se ubicará encima del encabezado que desea. El navegador se desplazó hasta el borde superior; su encabezado se movió más tarde. Ambas mitades de la solución son CSS puro.
/* breathe below sticky headers when anchors are hit */
[id] { scroll-margin-top: 6rem; }
/* same for hash-targeted elements, plus free feedback */
:target { scroll-margin-top: 6rem; }
h2:target {
background: color-mix(in oklab, var(--brand) 12%, white);
border-radius: 0.35rem;
}En qué se diferencian las dos mitades
- scroll-margin-top crea un espacio donde aterrizan las operaciones de desplazamiento para anclar, incluidos marcadores de enlaces y saltos de enfoque para formar errores.
- La pseudoclase :target coincide con el elemento al que se dirige el fragmento de URL, lo que la convierte en su enlace destacado y visible para la sección que buscó el usuario.
- Ambos funcionan cuando JavaScript está deshabilitado, que es el estándar de casos de enlaces profundos en todos los sitios estáticos.
Configúrelo donde entran los enlaces
- Detecte el desplazamiento honesto: desplácese hasta un ancla en un navegador real y mida hasta qué punto se superpone el encabezado; use ese número, no una suposición redonda.
- Asigne a cada encabezado una identificación en el marcado; generó identificadores de encabezado a partir de su recuento de compilación, pero los identificadores deben existir para que el margen importe.
- Agregue el resaltado del objetivo como un fondo claro y no permanente que no combata el modo oscuro.
- Compruebe ambos comportamientos en un navegador con navegación hash y en la vista previa de impresión, donde el resaltado del objetivo no debe filtrarse al papel.
Los enlaces profundos son los artefactos más compartidos que produce su contenido, y lo mejor de esta solución es que no escribió ningún script y todavía parece que existe uno.