Descrizione generale

Questo codice crea un'interfaccia utente che include un indicatore di progresso dello scroll in forma circolare e un pulsante di ritorno in cima alla pagina. La struttura utilizza un misto di HTML, CSS e JavaScript per fornire una rappresentazione visiva del progresso dell'utente mentre scorre la pagina, e permette di tornare rapidamente in cima con un clic. Il cerchio dell'indicatore di progresso e il pulsante sono accompagnati da una freccia stilizzata che facilita la comprensione dell'azione.

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 di ritorno (#scrollIndicator) è un cerchio con larghezza e altezza di 40px, con background bianco e un'ombra per evidenziarlo sulla pagina. È posizionato in basso a destra della finestra tramite position: fixed, il che garantisce che rimanga visibile anche quando si scorre la pagina.
• L'icona della freccia (con classe .arrow) è centrata sia verticalmente che orizzontalmente all'interno del pulsante, grazie all'uso delle proprietà display: flex, align-items: center, e justify-content: center.
• L'elemento SVG che contiene il cerchio di avanzamento (.progress-ring) è anch'esso posizionato in modo assoluto dentro il pulsante, con la proprietà z-index usata per farlo stare dietro l'icona della freccia.
• Il cerchio di avanzamento (.progress-ring__circle) ha una proprietà CSS stroke-dashoffset che gestisce il riempimento del cerchio, con un'animazione graduale al variare della percentuale di scroll della pagina.

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 del cerchio: Il cerchio SVG ha un raggio di 18px. La circonferenza del cerchio è calcolata come 2 * Math.PI * radius. Questo valore è usato per controllare il riempimento visivo del cerchio con l'attributo stroke-dashoffset, che varia a seconda di quanto l'utente ha scrollato nella pagina.
• Funzione setProgress(): Questa funzione riceve come parametro una percentuale, calcola l'offset della circonferenza e aggiorna la visualizzazione del cerchio. Più l'utente scorre la pagina, più il cerchio si riempie in senso orario.
• Evento scroll: Un listener è aggiunto per monitorare l'evento scroll della finestra. Ogni volta che l'utente scorre, il JavaScript calcola:
  • La quantità totale di pagina scrollabile.
  • La distanza già percorsa dall'inizio della pagina.
  • La percentuale di scroll (distanza percorsa rispetto alla lunghezza totale).
  Questa percentuale viene passata alla funzione setProgress(), che aggiorna la visualizzazione del cerchio.
• Funzione scrollToTop(): Quando l'utente clicca sul pulsante, la funzione scrollToTop() viene eseguita. Essa utilizza l'API window.scrollTo() con l'opzione behavior: smooth, che garantisce uno scorrimento fluido fino alla cima della pagina.

Funzionalità principali

• Indicatore di progresso dello scroll: Il cerchio dell'SVG rappresenta la progressione dello scroll nella pagina. Quando l'utente inizia a scorrere, il cerchio inizia a riempirsi, fornendo un feedback visivo del punto in cui si trova nella pagina.
• Pulsante di ritorno in cima: Il pulsante è sempre visibile in basso a destra della finestra. Cliccando su di esso, l'utente torna automaticamente in cima alla pagina. La presenza della freccia verso l'alto rende intuitivo il suo scopo.
• Design responsivo e animazioni fluide: Il design del pulsante è elegante, con animazioni fluide per migliorare l'esperienza utente.

Possibili varianti

• Personalizzazione del pulsante: Si può aggiungere un'interazione visiva, ad esempio cambiando il colore del pulsante quando l'utente passa il mouse sopra.
• Visibilità dinamica: Il pulsante potrebbe essere reso visibile solo dopo che l'utente ha scrollato una certa quantità, per evitare distrazioni quando ci si trova ancora nella parte superiore della pagina.

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.