← Todos los ejemplos

JavaScript Navegación

Enlace saltar al contenido

Añade un enlace oculto que aparece con Tab y salta directo al contenido principal.

Código para copiar

var target = document.querySelector('main, [role="main"], #content, article');
if (target) {
  if (!target.id) { target.id = 'nv-main-content'; }
  var link = document.createElement('a');
  link.href = '#' + target.id;
  link.textContent = 'Skip to content';
  link.style.cssText = 'position:fixed;top:-100px;left:8px;z-index:99999;background:#006870;color:#fff;padding:8px 14px;border-radius:4px;text-decoration:none';
  link.addEventListener('focus', function () { link.style.top = '8px'; });
  link.addEventListener('blur', function () { link.style.top = '-100px'; });
  document.body.insertBefore(link, document.body.firstChild);
}

Cómo usar este ejemplo

  1. Copia el código con el botón de arriba.
  2. Instala JustZix (2 minutos) y abre la extensión en la página de destino.
  3. Añade una nueva regla que coincida con esa página.
  4. Pega el código en el panel JavaScript de la regla y guarda — se ejecuta en cada visita a la página.

Valora este ejemplo

Sin valoraciones — sé el primero.

¿Funciona este ejemplo?

Los snippets son inútiles sin un lugar donde pegarlos.

JustZix se instala en 2 minutos y ejecuta tu código en cada página coincidente. Sin cuenta, sin pago.

Descargar gratis Ver casos de uso