Home>Guide>Realizzare uno scrolltop con jQuery

Realizzare uno scrolltop con jQuery


Realizzare uno scroll top animato con jQuery


Quante volte ti è capitato di leggere articoli molto lunghi, arrivare alla fine e renderti conto di dover risalire per avere accesso al menu di navigazione ad esempio? Certo, non è poi così difficile scrollare la pagina verso l’alto, starai pensando, lo è sicuramente di più su dispositivi mobile, ma in entrambi i casi, perché non offrire un plus ai tuoi utenti, come ad esempio un pulsante fisso che scorre la pagina in un secondo e ci riporta in cima?

  • Leggi l'articolo, ti bastano solo 2 minuti, 37 secondi
    Sei di fretta? Scarica il PDF e consultalo quando vuoi!

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!




Ti è piaciuto questo articolo? Regalami un click per ripagarmi dello sforzo



Code4Life ti è stato utile? Sostienici con una donazione!

Dona con PayPal

Hai trovato interessante l’articolo? Allora ti consiglio di leggere:

Come effettuare un reindirizzamento permanente

Come effettuare un reindirizzamento permanente


Ecco un piccolo trucco per evitare di perdere utenti e traffico, nel caso ci sia la necessità o semplicemente la volontà di cambiare il dominio del proprio sito web, così da preservare il posizionamento fin qui acquisito.

Personalizzare la pagina di login di WordPress

Personalizzare la pagina di login di WordPress


Hai mai pensato di personalizzare la pagina di login di WordPress? Scopriamo in questo articolo come farlo, modificando a nostro piacimento il logo, la grafica e altri elementi, così da dare quel tocco personale al sito, ma anche come aumentare la sicurezza del login.

Oppure cerca tra gli articoli correlati


E tu cosa ne pensi? Condividi la tua opinione e discutiamone insieme
La tua email non sarà resa pubblico o utilizzata per inviarti spam, te lo prometto

Iscrivimi alla newsletter per ricevere news ed aggiornamenti
Utilizziamo piattaforme di terze parti per l’invio di newsletter. (Informativa sulla privacy)
Tienimi aggiornato su questo articolo
Ricevi una email di notifica quando qualcuno scriverà un commento a questo articolo. (Informativa sulla privacy)
Ricorda i miei dati per la prossima volta che scriverò un commento
Il tuo nome e la tua email verranno salvati in un cookie in questo browser. (Informativa sulla privacy)