← Tutti gli esempi

JavaScript Navigazione

Indice dai titoli

Crea un indice flottante dai titoli H2 e H3 con collegamenti alle sezioni.

Codice da copiare

var heads = document.querySelectorAll('h2, h3');
if (heads.length) {
  var box = document.createElement('nav');
  box.style.cssText = 'position:fixed;top:60px;right:10px;max-height:70vh;overflow:auto;background:#fff;color:#111;border:1px solid #ccc;padding:8px 12px;font:13px sans-serif;z-index:99999;max-width:240px';
  heads.forEach(function (h, i) {
    if (!h.id) { h.id = 'nv-toc-' + i; }
    var a = document.createElement('a');
    a.href = '#' + h.id;
    a.textContent = h.textContent.trim();
    a.style.cssText = 'display:block;padding:2px 0;color:#006870;text-decoration:none;' + (h.tagName === 'H3' ? 'margin-left:12px' : '');
    box.appendChild(a);
  });
  document.body.appendChild(box);
}

Come usare questo esempio

  1. Copia il codice con il pulsante qui sopra.
  2. Installa JustZix (2 minuti) e apri l'estensione sulla pagina di destinazione.
  3. Aggiungi una nuova regola corrispondente a quella pagina.
  4. Incolla il codice nel pannello JavaScript della regola e salva — viene eseguito a ogni visita della pagina.

Valuta questo esempio

Nessuna valutazione — sii il primo.

Questo esempio funziona?

Gli snippet sono inutili senza un posto dove incollarli.

JustZix si installa in 2 minuti ed esegue il tuo codice su ogni pagina corrispondente. Senza account, senza pagamento.

Scarica gratis Guarda i casi d'uso