Descrizione generale

Questa pagina mostra un indicatore circolare dello scroll con un pulsante “Torna su”. Il cerchio si riempie in base alla percentuale di pagina scorsa; il pulsante resta nascosto quando sei all’inizio e compare dopo il 10% di scroll. Un clic ti riporta in cima con uno scorrimento fluido.

Come funziona il codice

1. HTML: Struttura del contenuto

Il codice HTML definisce la struttura di base della pagina:

• Header: Include le meta informazioni per la pagina (codifica caratteri e responsività), oltre a un link per caricare la libreria Font Awesome, necessaria per visualizzare le icone delle frecce.
• Main Content:
  • Un <div> con id="scrollIndicator" rappresenta il pulsante che appare in basso a destra della finestra quando si scorre la pagina. Dentro questo <div> ci sono:
  • Un elemento SVG che rappresenta il cerchio che agisce come indicatore di scroll.
  • Un'icona freccia (presa da Font Awesome) che punta verso l'alto, indicando che il pulsante permette di tornare in cima.
• Script JavaScript: Nella parte finale del corpo della pagina troviamo un blocco <script> che controlla la logica di interazione e il comportamento dello scroll indicator.

2. CSS: Stile visivo

Il CSS gestisce la formattazione e lo stile visivo del pulsante e del contenuto:

• Il pulsante (#scrollIndicator) è un cerchio di 40px con sfondo e ombra, posizionato in basso a destra via position: fixed.
• Stato base nascosto: il CSS imposta opacity: 0 e pointer-events: none su #scrollIndicator. Quando il JavaScript aggiunge la classe .is-visible (dopo il 10% di scroll), il bottone diventa visibile.
• L’icona freccia (classe .arrow) è centrata tramite flexbox.
• Il cerchio SVG (.progress-ring__circle) usa stroke-dasharray/stroke-dashoffset per mostrare l’avanzamento in modo fluido.

3. JavaScript: Logica di funzionamento

La logica principale per il funzionamento del pulsante di ritorno e del cerchio di avanzamento è scritta in JavaScript:

• Calcolo della circonferenza: dal raggio (r=18) del cerchio SVG si ottiene circumference = 2 * Math.PI * r. Questo valore è usato per impostare stroke-dasharray e per aggiornare stroke-dashoffset.
• Percentuale di scroll: ad ogni scroll (ottimizzato con requestAnimationFrame) si calcola la percentuale come (scrollTop / (scrollHeight - clientHeight)) * 100.
• Avanzamento cerchio: dato percent, l’offset viene aggiornato a circumference - (percent / 100) * circumference.
• Visibilità dinamica del pulsante: il bottone compare solo quando la percentuale supera il 10% (soglia configurabile). In pratica: indicator.classList.toggle('is-visible', percent > 10);
• Ritorno in cima: il click esegue uno scroll fluido con window.scrollTo({ top: 0, behavior: 'smooth' }).

Funzionalità principali

• Indicatore di progresso: il cerchio mostra in tempo reale la percentuale di pagina scorsa.
• Pulsante di ritorno in cima (non invasivo): resta nascosto all’inizio e appare dopo il 10% di scroll, per non distrarre nelle prime righe della pagina.
• Design responsivo e animazioni fluide: transizioni morbide e comportamento coerente su diverse altezze di viewport.

Possibili varianti

• Personalizzazione del pulsante: puoi aggiungere effetti hover (colore di sfondo/ombra/icone), cambiare dimensioni o il colore della traccia dell’SVG per adattarlo al tuo tema.
• Visibilità dinamica (soglia personalizzabile): il pulsante può diventare visibile solo dopo una certa quantità di scroll, così non distrae in cima alla pagina. Alcune idee:
  1. Valore fisso (px)

     Usa una soglia fissa in pixel (es. 120px). Quando l'utente scorre oltre quel valore il pulsante viene mostrato. Metodo semplice, prevedibile e adatto a layout che non cambiano molto fra device.

  2. In base all'altezza della viewport

     Calcola la soglia come percentuale dell'altezza della finestra (es. 25% di window.innerHeight). Utile quando vuoi che il comportamento sia proporzionale alla dimensione dello schermo.

  3. In base alla percentuale di pagina scrollata

     Mostra il pulsante quando l'utente ha scrollato una certa percentuale della pagina (es. dopo il 10% del documento). Funziona bene su pagine molto lunghe o con contenuti dinamici.

Conclusioni

Questa soluzione è semplice ma efficace e offre all'utente un'esperienza più interattiva e visivamente piacevole quando naviga in pagine con molto contenuto.

Download codice

Trovate il link con il codice completo della descrizione dettagliata riga per riga nella sezione dedicata UI Components.