Come ottenere lo "smooth scroll" (scorrimento verticale fluido) su un sito web

Indice:

Di default, quando usate un'ancora in una pagina web, lo "spostamento" del browser verso l'ancora è immediato. Il rischio è che l'utente non capisca cosa sia successo e abbia un momento di disorientamento. Come attivare lo smooth scroll (o scorrimento fluido, in italiano) su un sito web?

Che cos'è lo scroll in ambito web?

Molto semplicemente lo scorrimento della pagina web (in alto o in basso) verso un punto specifico, che viene chiamato "àncora". Molto spesso queste ancore vengono utilizzate nelle landing page per portare l'utente verso il form di contatto, oppure in pagine particolarmente lunghe che richiedono la divisione in capitoli e conseguente indice dei contenuti.

Come si crea un'ancora in HTML?

Il processo è semplicissimo.

Prima di tutto si crea la sezione di "atterraggio". Si utilizza l'attributo ID che, per definitizione, è unico nella pagina (in questo modo non ci sono problemi da parte del browser nel capire dove "atterrare"). Per esempio possiamo associarlo ad un DIV:

<div id="atterraggio">Questa è la sezione della pagina dove voglio far atterrare i miei utenti</div>

 Può essere usato un qualsiasi tag HTML: H1, H2, ecc..

A questo punto dobbiamo creare il link di "decollo": ossia un link che, se cliccato, farà spostare la videata del browser verso il DIV creato qui sopra.
Per farlo si utilizza l'attributo HREF del tag A, scrivendo il cancelletto e l'ID dell'elemento target:

<a href="#atterraggio">Verso l'infinito ed oltre!</a>

Il gioco è fatto! Il browser ora sa che, quando verrà cliccato il link, dovrà portare la videata del browser verso il div con ID "atterraggio"

Come si attiva lo scorrimento fludio, o smooth scroll?

 Di default i browser usano lo scorrimento immediato: la videata va istantaneamente verso l'elemento target, senza latenza o sensazione di movimento. Nonostante questo tipo di scroll sia immediato e più veloce, il cambio repentino di videata può leggermente smarrire l'utente che, se non sa di avere a che fare con un'ancora, può non capire più in quale parte della pagina o del sito si trova.

Per ovviare a questo problema basta aggiungere un semplice regola CSS (ovunque nel vostro foglio di stile, se il vostro sito è un Joomla probabilmente avete a disposizione nel template un custom.css in cui inserire questa regola):

html {
   scroll-behavior: smooth;
}

Fine! Ora il vostro browser si sposterà in su o in giù più lentamente, dando proprio l'impressione di movimento.

Personalmente penso sia una feature fondamentale per una questione estetica e soprattutto di usabilità di un sito web.

Ora impariamo cos'è la ricorsione con lo smooth scroll!

Nota importante: questa feature è pienamente supportata da tutti i browser moderni. Alcuni browser vetusti (dei vecchissimi Internet Explorer per esempio) potrebbero non riconoscerla. Poco male, il browser continuerà ad andare su e giù istantaneamente come se nulla fosse, ma non ci saranno problemi di leggibilità della pagina.