Componente

Back to top

Il pulsante rotondo che riporta in cima alla pagina: un link a #top, fisso in basso a destra, che compare dopo lo scorrimento.

Riferimento: <it-back-to-top>
Classi: ita-back-to-topita-back-to-top-lgita-back-to-top-shadowita-back-to-top-fixed
Basato su (daisyUI): btnbtn-circlebtn-primary
Estensioni: it-scroll-reveal
Solo CSS: href="#top" porta in cima al documento anche senza un elemento con quell'id. La comparsa è una scroll-driven animation (it-scroll-reveal) legata allo scorrimento della pagina. I browser che non supportano animation-timeline mostrano il pulsante sempre. Aggiungi scroll-smooth su <html> per lo scorrimento fluido.
Storybook: Apri le storie di Back to top

Varianti

Mostrati sul posto; nella pagina reale sono fissi in basso a destra. La seconda riga è su sfondo primario (it-surface-primary).

Mostra il codice HTML

<div class="flex flex-wrap items-center gap-6">
  <a href="#top" class="ita-back-to-top" aria-label="Torna su"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M18.6,10.1L12,3.5l-6.6,6.6l0.7,0.7l5.4-5.3V21h1V5.5l5.4,5.3L18.6,10.1z" /></svg></a>
  <a href="#top" class="ita-back-to-top ita-back-to-top-lg" aria-label="Torna su"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M18.6,10.1L12,3.5l-6.6,6.6l0.7,0.7l5.4-5.3V21h1V5.5l5.4,5.3L18.6,10.1z" /></svg></a>
  <a href="#top" class="ita-back-to-top ita-back-to-top-shadow" aria-label="Torna su"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M18.6,10.1L12,3.5l-6.6,6.6l0.7,0.7l5.4-5.3V21h1V5.5l5.4,5.3L18.6,10.1z" /></svg></a>
</div>
<div class="it-surface-primary mt-6 rounded-box p-6"><div class="flex flex-wrap items-center gap-6">
  <a href="#top" class="ita-back-to-top" aria-label="Torna su"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M18.6,10.1L12,3.5l-6.6,6.6l0.7,0.7l5.4-5.3V21h1V5.5l5.4,5.3L18.6,10.1z" /></svg></a>
  <a href="#top" class="ita-back-to-top ita-back-to-top-lg" aria-label="Torna su"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M18.6,10.1L12,3.5l-6.6,6.6l0.7,0.7l5.4-5.3V21h1V5.5l5.4,5.3L18.6,10.1z" /></svg></a>
</div></div>

Fisso nella pagina

Questo pulsante è davvero fisso: scorri la pagina e comparirà in basso a destra.

Scorri la pagina verso il basso.

Mostra il codice HTML

<p class="text-base-content/75">Scorri la pagina verso il basso.</p>
<a href="#top" class="ita-back-to-top ita-back-to-top-shadow ita-back-to-top-fixed it-scroll-reveal" aria-label="Torna su"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M18.6,10.1L12,3.5l-6.6,6.6l0.7,0.7l5.4-5.3V21h1V5.5l5.4,5.3L18.6,10.1z" /></svg></a>