Realizzare uno scrolltop con jQuery

HTML: iniziamo dal markup

Il codice HTML per realizzare il pulsante che si occuperà di avviare lo scroll verso inizio pagina è davvero molto semplice:

<div id="go_top">
	<a href="#"><i class="fa fa-chevron-circle-up"></i></a>
</div>

Volendo puoi utilizzare una qualsiasi immagine o icona, ma nel caso in esempio, abbiamo utilizzato un’icona di FontAwesome, se non lo conosci te lo consiglio!

CSS: applichiamo lo stile

Dobbiamo posizionare il nostro bottone scrolltop che nella maggior parte dei casi viene visualizzato in basso a destra della viewport:

#go_top {
	bottom: 10px;
	position: fixed;
	right: 10px;
	z-index: 99;
}
#go_top a {
	color: #000;
	font-size: 50px;
}

Ecco come si presenta adesso il nostro pulsante ScrollTop:

jQUERY: includiamolo nella pagina

Prima di poter utilizzare jQuery nel tuo script, è necessario includere la libreria nella tua pagina.
Se è già presente, o sai come fare, puoi saltare direttamente al paragrafo successivo.

Per includere la libreria di jQuery nella tua pagina, puoi utilizzare diversi modi:
Scaricare il file dal sito ufficiale di jQuery ed aggiungere alla tua pagina il seguente codice, preferibilmente prima della chiusura del tag body:

<script src="cartella_in_cui_hai_inserito_jquery/jquery-3.2.1.min.js"></script>

Inserire una delle tante CND disponibili in rete, tra cui una delle più utilizzate è quella messa a disposizione da Google. Aggiungi alla tua pagina il seguente codice, preferibilmente prima della chiusura del tag body:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

JQUERY: creiamo l'azione

Ora che hai creato il tuo pulsante, fisso in basso a destra e che hai inserito la libreria necessaria, non ti resta che creare lo script che si occuperà di intercettare il click sul pulsante e attivare lo scroll animato verso l’inizio pagina. Inserisci nella pagina, dopo lo script di jQuery, il seguente codice:

jQuery( function( $ ) {
	$( '#go_top a' ).on( 'click', function( e ) {
		e.preventDefault();
		$( 'html, body' ).stop().animate( {
			scrollTop: 0
		}, '500', 'swing' );
	} );
} );

Nel dettaglio, riga per riga:

1. dichiara una funzione che fa utilizzo di jQuery e permette quindi di richiamarne i metodi;
2. “aggancia” all’elemento <a> contenuto nell’elemento con id=”go_top” una funzione che ne intercetta il click;
3. previene che venga svolta l’azione di default prevista per il click sull’elemento (trattandosi di un tag <a>, evita il reindirizzamento della pagina);
4. ferma tutte le eventuali azioni applicate ai tag body e html già in corso di svolgimento (per evitare accavallamenti) tramite il metodo stop(), poi applica un’animazione sull’azione di scrollTop (altro metodo di jQuery) verso la posizione 0 pixels.
5. dichiara la durata dell’animazione (in millisecondi).

Semplice no? Con poche righe di codice, ecco pronto il tuo ScrollTop jQuery, i tuoi utenti ne saranno entusiasti!