← Tutti gli esempi

JavaScript Navigazione medium.com

Medium: pulsante torna su

Aggiunge un pulsante fluttuante per tornare dolcemente in cima dopo aver scorso in basso.

Codice da copiare

// Add a back-to-top button that appears after scrolling down
(function () {
  if (document.getElementById('jz-med-top')) { return; }
  const btn = document.createElement('button');
  btn.id = 'jz-med-top';
  btn.textContent = '↑';
  btn.style.cssText = 'position:fixed;right:24px;bottom:24px;width:42px;' +
    'height:42px;border-radius:50%;border:none;background:#1a8917;' +
    'color:#fff;font-size:20px;cursor:pointer;z-index:99999;display:none;';
  btn.addEventListener('click', function () {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  });
  document.body.appendChild(btn);
  window.addEventListener('scroll', function () {
    btn.style.display = window.scrollY > 600 ? 'block' : 'none';
  }, { passive: true });
})();

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