Come aggiungere il pulsante scroll top a WordPress in 5 minuti
Tempo di lettura: 4 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 è un jQuery scroll top o jQuery scroll to top, che dir si voglia, , che 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 con un effetto di smooth scroll.
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 on scroll, 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.
