Aggiungere un link ad inizio pagina con jQuery

La grande diffusione dei dispositivi mobili con display di dimensioni relativamente ridotte favorisce la navigazione su uno schermo "verticale", basti pensare agli smartphone. Bootstrap 4 individua gli extra small devices come dispositivi mobili con display di larghezza inferiore a 576px (per altri dettagli sui breakpoint in Bootstrap 4 consulta questa pagina).

Considerando poi che molti siti sono strutturati con pannelli piuttosto ampi e caratteri di dimensione medio-grande per garantire una buona leggibilità anche su cellulare, va da sè che per consultare una pagina per intero si scorre verso il basso sul dispositivo più e più volte. Per garantire l'usabilità del sito è praticamente indispensabile aggiungere un link che permette di riportare la pagina all'inizio. Meglio ancora, questo deve essere visibile solo quando la parte iniziale della pagina stessa inizia a "scomparire".

Aggiungere un elemento del genere al proprio sito è davvero semplice, sono sufficienti un minimo di HTML, CSS e jQuery. Un minimo sul serio. Nel seguito propongo una soluzione per un sito Joomla, (visto che il sito è pubblicato su questa piattaforma...), ma è davvero semplice implementarla su altri sistemi. Ho testato il tutto su diversi siti Joomla dalla versione 3.8.6 e superiori del CMS, per cui garantisco il funzionamento solo su tali release.

Iniziamo dalla parte più banale: individuiamo un'immagine che rappresenti il nostro link. Certo, si potrebbe usare anche un testo, tipo Top, ma trovo una piccola immagine meno invasiva e più elegante. Nella soluzione che ho implementato su questo sito uso un piccolo file SVG (Scalable Vector Graphics), facilmente scalabile e di piccole dimensioni. Scorrete la pagina verso il basso fino a fare scomparire qualche pixel nella parte superiore della pagina per farlo apparire. Individuata l'immagine adatta, carichiamola in una cartella del sito pubblicato.

Ora creiamo un modulo in Joomla: dal menu Estensioni selezionare Moduli, quindi clic sul pulsante Nuovo. Nella pagina successiva fare clic su Personalizzato per aprire la pagina di creazione del modulo. Non descrivo in dettaglio tutte le opzioni (Titolo, Assegnazione Menu, Categoria, etc), chi lavora con Joomla anche da poco tempo sa già tutto in proposito. L'unico parametro che sottolineo è Posizione: va impostato su Debug. È una posizione non utilizzata di base e pensata per il debug del codice (da cui il nome); in seguito è diventata utile anche per creare moduli non visibili se non con metodi diversi (p.e. css+jQuery, come nel nostro caso).

Vediamo ora il codice del modulo:

	<a id="totop" href="#" class="totop-scroller"></a>
	<script>
		jQuery(document).ready(function() { 
			jQuery(window).scroll(function() {
				if (jQuery(this).scrollTop() > 30) {
					jQuery('#totop').fadeIn(200);
				} else {
					jQuery('#totop').fadeOut(200);
			}
		});

		jQuery('#totop').click(function(event) {
			event.preventDefault();
			jQuery('html, body').animate({scrollTop: 0}, 500);
		})
	});
	</script> 

Di HTML c'è ben poco, solo la prima riga. L'elemento ha ID totop, è necessario per individuarlo nel CSS, che spiego più oltre. Riveste importanza fondamentale anche la classe totop-scroller.

Il resto del codice è jQuery, ed è molto semplice. Descrivo brevemente le istruzioni principali:

• jQuery(window).scroll(function(): questa istruzione gestisce l'evento scroll. Viene chiamata ogni volta che si scorre la pagina, non importa se verso l'alto o verso il basso. È la base del nostro sistema: reagisce a questo evento per passare poi il controllo alle istruzioni che stabiliscono se mostrare o meno il link all'inizio pagina.
• Il test successivo (if (jQuery(this).scrollTop() > 30)... } else {... ) è banale: scrollTop() ritorna la posizione dell'elemento corrispondente; rappresenta in pratica il numero di pixel nascosti nella parte superiore dell'elemento (per dettagli consulta la documentazione relativa sul sito jQuery). Se la parte superiore della pagina, quindi, è "nascosta" di oltre 30 pixel, viene eseguita la funzione .fadeIn() sull'elemento con ID totop (date un'occhiata alla riga HTML citata in precedenza...), rendendolo visibile con un effetto assolvenza di durata 200 millisecondi; in caso contrario, l'elemento scompare con una dissolvenza della stessa durata. Il valore 30 è piuttosto basso, in questo caso necessario vista la posizione dei campi di input. Se non avete elementi significativi nella parte superiore della pagina si può utilizzare 50 o anche più.
• Ultima parte, evento clic sull'elemento con ID totop. Facendo clic sull'elemento in questione quando visibile, si effettua lo scorrimento della pagina all'inizio con durata 500 millisecondi. Specifico entrambi gli elementi html e body perchè a seconda del browser pare funzioni uno o l'altro. Non ho fatto test dedicati.

Rimane solo da descrivere il breve codice CSS dedicato alla posizione dell'elemento:

#totop {
	display: none;
	position: fixed;
	bottom: 0;
	right: 0;
	z-index: 1001;
}

.totop-scroller {
	background: transparent url("totop_scroller.svg") 0px 0 no-repeat;
	height: 45px;
	width: 45px;
	transition: all 0.05s linear;
}

È così banale che vi dedico solo due righe: il primo selettore, totop, si applica al solito elemento con ID totop (come sapete l'operatore # individua l'elemento con l'ID che lo segue, che è univoco in una pagina) ed ha lo scopo di impostare la posizione dell'elemento grafico oltre che nasconderlo inizialmente. Il parametro z-index serve per mantenere il nostro elemento "in alto" sull'asse Z. Il secondo selettore si applica a tutti gli elementi con classe totop-scroller e ne definisce le proprietà grafiche: immagine di sfondo, dimensioni, etc.

In questa pagina è visibile il risultato finale. Davvero semplice e comodo: ho impiegato a realizzarlo un tempo pari ad un decimo del tempo necessario per scrivere questa pagina.