Come aggiungere il pulsante scroll top a WordPress in 5 minuti

19 Dic 2021 - Wordpress


Come aggiungere il pulsante scroll top a WordPress in 5 minuti

Buongiorno a tutti i lettori, dopo un periodo breve di inattività sul blog sono di nuovo qua 🙂

Oggi voglio mostrarvi, in modo “semplice”, come aggiungere il pulsante scroll top a WordPress in fondo alla pagina che al click (su desktop) o al tap (da mobile) porti in alto nella pagina senza dover eseguire scroll infiniti verso l’alto, molto utile per siti con articoli o pagine con molti contenuti.

Un esempio lo potete trovare in questo sito web 😉

Mantenendomi sul solito stile vi mostro come farlo prima tramite codice, e successivamente tramite l’utilizzo di plugin.
Ma veniamo a noi!

Video guida su come aggiungere il pulsante scroll top a WordPress in 5 minuti

Aggiungere il pulsante scroll top a WordPress tramite codice

Realizzare il pulsante scroll top in html

Per prima cosa dobbiamo andare a realizzare la versione html del contenitore del nostro pulsante.

<a id="to-top"><span class="margine-to-top-button">Top</span> <i class="far fa-arrow-alt-circle-up"></i></a>

Andiamo ad inserire il codice qui sopra in header.php all’interno del tag <body>, subito dopo l’apertura.

Assegnare il movimento al bottone scroll top grazie ad un po’ di codice

Successivamente, per aggiungere il pulsante scroll top, dobbiamo andare a scrivere le poche righe di codice che serve per realizzare l’animazione.

  var btn = $('#to-top');

  $(window).scroll(function() {
    if ($(window).scrollTop() > 600) {
      btn.addClass('show');
    } else {
      btn.removeClass('show');
    }
  });

  btn.on('click', function(e) {
    e.preventDefault();
    $('html, body').animate({scrollTop:0}, {easing: "swing", duration: 1000});
  });

Spiegato brevemente, lo script assegna tutto il contenuto dello script all’ID che noi abbiamo impostato come #to-top, poi si compone in due parti:

Recupero del valore di scroll top

Recupera il valore dello scroll che stiamo eseguendo in quel momento e quando arriviamo ad uno scroll di almeno 600 pixel aggiunge la classe .show, se il valore è minore allora rimuove la solita classe.

Animazione al click o al tap sul pulsante scroll top

Quando il pulsante sarà visibile e quindi dopo che avremo eseguito lo scroll per più di 600px, andiamo ad assegnare l’animazione per fare uno scroll verso l’alto.

Modificare i valori dello script

In questo script, avete la possibilità di andare a modificare alcuni valori come:

  • La durata dello scroll: alla voce “duration:1000” che per il momento è impostata su 1 secondo (1000 è un valore espresso in millisecondi, quindi in questo caso sarà un secondo)
  • Il tipo di velocità dello scroll: chi conosce il css, sa che si possono inserire più valori come linear, swing, cubic-bazier ecc
  • La distanza dal top della pagina: questa distanza è considerata dal margine più alto della pagine, fino al valore scelto.
    Questo valore servirà per andare a mostrare il pulsante (in questo caso 600, che è un valore espresso in pixel).

Assegnare il css al pulsante To Top Page per dare un tocco di grafica

Adesso il pulsante sarà già visibile sul vostro schermo :p scherzo 😀

Anche se non proprio… il pulsante c’è ma non ha la proprietà giusta… assegnamo il css qui sopra per stilizzare e posizionare il tutto:

#to-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
	width: auto;
	height: auto;
	background: #ffffffa3;
	line-height: 10px;
	text-align: center;
	border-radius: 5px;
	color: #000;
	z-index: 999;
	opacity: 0;
	visibility: hidden;
	transition: all .5s cubic-bezier(.215, .61, .355, 1);
	cursor: pointer;
	padding: 13px 13px;
	font-size: 1.1em;
	box-shadow: 0px 10px 7px -10px #000;
}
#to-top.show {
	opacity: 1;
	visibility: visible;
}
#to-top i {animation: my-animation 1.5s infinite ease-in-out;}
span.margine-to-top-button {margin-right: 10px;}

@keyframes my-animation{
  0% {transform: translateY(-6px);}
	50%{transform: translateY(6px);}
  100% {transform: translateY(-6px);}
}

Se controllate bene il codice css qui sopra, noterete che ho aggiunto una formula che non tutti conoscono, ovvero @keyframe. Questa non fa altro che permetterci di realizzare le nostre animazioni personalizzate, specificando semplicemente la % della timeline e cosa deve fare.

Inserire il pulsante scroll top tramite l’utilizzo di un plugin

WPFront Scroll Top

L’alternativa più semplice è quella di inserire un plugin che faccia questo al posto nostro, ovvero WPFront Scroll Top reperibile sulla repository ufficiale di WordPress.

Il plugin è molto semplice da usare e ricco di opzioni, cliccate le immagini qui sotto per vedere ciò che vi aspetta (Screenshot presi direttamente dalla pagina della repository appena menzionata che potete trovare all’indirizzo https://it.wordpress.org/plugins/wpfront-scroll-top/ ).

Conclusioni

Come avete visto da soli la procedura per aggiungere il pulsante scroll top in WordPress è molto semplice in entrambi i casi e non richiede nessuna particolare skill per poter inserire il pulsante.

Nel caso riscontriate qualche sorta di errore nella procedura o in caso vogliate assistenza nella procedura, non esitate a contattarmi con il modulo di contatto qui sotto.

Offrimi un caffè

Ciao, se le mie guide ti appassionano, ti hanno aiutato o ti hanno risolto alcuni problemi, offrimi un caffè o qualcosa di più.

Te ne sarò immensamente grato!

POST CORRELATI

Massimiliano Piacentini

Proprietario di 360Smartweb

Dopo vari anni passati come graphic designer e dopo molti corsi, ho seguito la mia massima passione: lo sviluppo di siti web in html, php e WordPress. Il design web è stata una semplice conseguenza di tutte le mie skills che mi permettono, seguendo le best practices, per dare una User Experience sui siti creati.