Come aggiungere un effetto di scorrimento fluido verso l’alto in WordPress utilizzando jQuery

Volete aggiungere un effetto di scorrimento fluido all’inizio della pagina sul vostro sito web WordPress?

L’effetto di scorrimento verso l’alto è ottimo quando si ha una pagina lunga e si vuole dare agli utenti un modo semplice per tornare all’inizio. Contribuisce a migliorare l’esperienza dell’utente nel sito web.

In questo articolo vi mostreremo come aggiungere un effetto di scorrimento fluido in WordPress utilizzando jQuery e un plugin.

Che cos’è lo Smooth Scroll e quando va usato?

A meno che il sito non disponga di un menu d’intestazione appiccicoso, gli utenti che scorrono in fondo a una lunga pagina o a un post di WordPress devono scorrere manualmente il dito o tornare in cima per navigare nel sito.

Questo può essere un vero e proprio fastidio e spesso gli utenti si limitano a premere il pulsante indietro e ad andarsene. Per questo motivo è necessario un pulsante che rimandi rapidamente gli utenti all’inizio della pagina.

È possibile aggiungere questa funzionalità come semplice collegamento testuale senza utilizzare jQuery, come in questo caso:

<a href="#" title="Back to top">^Top</a>

In questo modo gli utenti vengono mandati in cima scorrendo l’intera pagina in pochi millisecondi. Funziona, ma l’effetto può essere stridente, come quando si incontra un dosso sulla strada.

Lo scorrimento fluido è l’opposto. Fa scorrere l’utente verso l’alto con un effetto visivamente gradevole. L’utilizzo di elementi come questo può migliorare drasticamente l’esperienza dell’utente sul vostro sito.

Detto questo, vediamo come aggiungere un effetto di scorrimento fluido in alto utilizzando un plugin per WordPress e jQuery.

Come aggiungere un effetto di scorrimento fluido verso l’alto utilizzando un plugin di WordPress

Questo metodo è consigliato ai principianti, poiché è possibile aggiungere un effetto scroll-to-top a un sito web WordPress senza toccare una sola riga di codice.

La prima cosa da fare è installare e attivare il plugin WPFront Scroll Top. Se avete bisogno di aiuto, consultate la nostra guida su come installare un plugin di WordPress.

Dopo l’attivazione, è possibile andare su Impostazioni ” Scroll Top dalla dashboard di WordPress. Qui è possibile configurare il plugin e personalizzare l’effetto di scorrimento fluido.

Per prima cosa, è necessario fare clic sulla casella di controllo ‘Abilitato’ per attivare il pulsante di scorrimento verso l’alto sul sito. Successivamente, verranno visualizzate le opzioni per modificare l’offset di scorrimento, le dimensioni del pulsante, l’opacità, la durata della dissolvenza, la durata dello scorrimento e altro ancora.

Scorrendo verso il basso, si trovano altre opzioni, come la modifica dell’orario di occultamento automatico, l’abilitazione dell’opzione per nascondere il pulsante sui dispositivi di piccole dimensioni e la possibilità di nasconderlo nella schermata di wp-admin.

È anche possibile modificare l’azione del pulsante quando si fa clic su di esso. Per impostazione predefinita, il pulsante scorre fino all’inizio della pagina, ma è possibile modificarlo in modo che scorra fino a un particolare elemento del post o addirittura a un link a una pagina.

È inoltre possibile modificare la posizione del pulsante. Per impostazione predefinita, appare nell’angolo in basso a destra dello schermo, ma è possibile scegliere di spostarlo in qualsiasi altro angolo.

Il plugin WPFront Scroll Top offre anche dei filtri per mostrare il pulsante di scorrimento verso l’alto solo su pagine selezionate.

Normalmente, appare su tutte le pagine del vostro blog WordPress. Tuttavia, è possibile accedere alla sezione “Visualizza sulle pagine” e scegliere dove visualizzare l’effetto di scorrimento verso l’alto.

Il plugin offre anche design di pulsanti precostituiti tra cui scegliere. Dovreste essere in grado di trovare facilmente un design che si adatti al vostro sito.

Se non riuscite a trovare un pulsante immagine precostituito che faccia al caso vostro, potete caricare un’immagine personalizzata dalla libreria multimediale di WordPress.

Al termine, è sufficiente fare clic sul pulsante “Salva modifiche”.

Ora potete visitare il vostro sito web per vedere il pulsante di scorrimento verso l’alto in azione.

Aggiunta di un effetto di scorrimento fluido in alto con jQuery in WordPress

Questo metodo non è consigliato ai principianti. È adatto a persone che hanno dimestichezza con la modifica dei temi, perché prevede l’aggiunta di codice al sito web.

Utilizzeremo jQuery, alcuni CSS e una singola riga di codice HTML nel vostro tema WordPress per aggiungere l’effetto di scorrimento fluido in alto.

Per prima cosa, aprite un editor di testo come Notepad e create un file. Salvatelo come smoothscroll.js.

Successivamente, è necessario copiare e incollare questo codice nel file:

jQuery(document).ready(function($){
	$(window).scroll(function(){
        if ($(this).scrollTop() < 200) {
			$('#smoothup') .fadeOut();
        } else {
			$('#smoothup') .fadeIn();
        }
    });
	$('#smoothup').on('click', function(){
		$('html, body').animate({scrollTop:0}, 'fast');
		return false;
		});
});

Dopodiché, è possibile salvare il file e caricarlo nella cartella /js/ della directory del tema di WordPress. Per maggiori dettagli, consultate la nostra guida su come usare FTP per caricare i file su WordPress.

Se il vostro tema non ha una directory /js/, potete crearne una e caricarvi smoothscroll.js. Per ulteriori informazioni, potete consultare la nostra guida sulla struttura dei file e delle directory di WordPress.

Questo codice è lo script jQuery che aggiunge un effetto di scorrimento fluido a un pulsante che porta gli utenti all’inizio della pagina.

La prossima cosa da fare è caricare il file smoothscroll.js nel tema. Per farlo, dobbiamo mettere in coda lo script in WordPress.

Dopodiché, è sufficiente copiare e incollare questo codice nel file functions.php del tema. Non raccomandiamo di modificare direttamente i file del tema, perché il minimo errore può danneggiare il sito. Potete invece utilizzare un plugin come WPCode e seguire il nostro tutorial su come aggiungere snippet di codice personalizzati in WordPress.

wp_enqueue_script( 'smoothup', get_template_directory_uri() . '/js/smoothscroll.js', array( 'jquery' ), '',  true );

Nel codice precedente, abbiamo detto a WordPress di caricare il nostro script e anche la libreria jQuery, poiché il nostro plugin dipende da essa.

Ora che abbiamo aggiunto la parte jQuery, aggiungiamo un vero e proprio link al nostro sito WordPress che riporti gli utenti all’inizio. Incollate semplicemente questo HTML in un punto qualsiasi del file footer.php del vostro tema. Se avete bisogno di aiuto, consultate il nostro tutorial su come aggiungere il codice dell’intestazione e del piè di pagina in WordPress.

<a href="#top" id="smoothup" title="Back to top"></a>

Avrete notato che il codice HTML include un link ma non un testo di ancoraggio. Questo perché utilizzeremo un’icona con una freccia verso l’alto per visualizzare un pulsante back-to-top.

In questo esempio, utilizziamo un’icona di 40x40px. È sufficiente aggiungere il CSS personalizzato qui sotto al foglio di stile del proprio tema.

In questo codice, utilizziamo un’icona come immagine di sfondo del pulsante e la impostiamo in una posizione fissa. Abbiamo anche aggiunto una piccola animazione CSS, che ruota il pulsante quando l’utente vi passa sopra con il mouse.

#smoothup {
height: 40px;
width: 40px;
position:fixed;
bottom:50px;
right:100px;
text-indent:-9999px;
display:none;
background: url("https://www.example.com/wp-content/uploads/2013/07/top_icon.png");
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s; transition-duration: 0.4s;
}

#smoothup:hover {
-webkit-transform: rotate(360deg) }
background: url('') no-repeat;
}

Nel CSS qui sopra, assicurarsi di sostituire https://www.example.com/wp-content/uploads/2013/07/top_icon.png con l’URL dell’immagine che si desidera utilizzare. È possibile caricare l’icona della propria immagine utilizzando il media uploader di WordPress, copiare l’URL dell’immagine e incollarlo nel codice.

Speriamo che questo articolo vi abbia aiutato ad aggiungere un effetto di scorrimento fluido verso l’alto sul vostro sito utilizzando jQuery. Vi consigliamo anche di consultare la nostra selezione dei migliori plugin WordPress per le piccole imprese e la nostra guida passo passo su come avviare un negozio online.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.