Come aggiungere un effetto di scorrimento fluido in alto in WordPress usando jQuery

L’aggiunta di un effetto di scorrimento fluido in alto può migliorare l’esperienza utente del sito web. È particolarmente utile in caso di pagine lunghe, per aiutare i visitatori a restituire rapidamente la pagina in alto.

L’impostazione dello scroll-to-top potrebbe intimidire, quindi abbiamo deciso di provarlo noi stessi. Abbiamo scoperto che è facile da impostare sul vostro sito web WordPress utilizzando jQuery o un plugin gratuito.

In questo articolo vi guideremo passo dopo passo su come add-on un effetto di scorrimento fluido in alto in WordPress.

Che cos’è lo smooth scroll e quando va usato?

A meno che il sito non abbia un menu header fisso, gli utenti che scorrono in fondo a una lunga pagina o a un post di WordPress devono scorrere manualmente il dito o tornare in alto per navigare nel sito.

Questo può essere un vero e proprio fastidio e spesso gli utenti si limitano a colpire il pulsante indietro e ad andarsene. Ecco perché è necessario un pulsante che rimandi rapidamente gli utenti in alto nella pagina o nel post.

In genere, è possibile aggiungere questa funzionalità come semplice link testuale senza utilizzare jQuery, come in questo caso:

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

Questo invia gli utenti in alto, facendo scorrere l’intera pagina in millisecondi. L’elaborazione in corso funziona, ma l’effetto può essere stridente, come quando si colpisce un dosso sulla strada.

Uno scorrimento fluido è l’opposto di questo. Fa scorrere l’utente tornando in alto con un effetto visivamente piacevole. L’utilizzo di elementi come questo può migliorare drasticamente l’esperienza dell’utente sul sito.

Per questo motivo, condivideremo due metodi per aggiungere un effetto di scroll-to-top fluido sul vostro sito WordPress utilizzando un plugin e jQuery. Sentitevi liberi di usare i link rapidi qui sotto per passare al metodo che preferite:

Senza ulteriori indugi, iniziamo con il primo metodo.

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

Questo metodo è consigliato ai principianti, poiché consente di aggiungere un effetto di scorrimento in alto 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 ” Scorrimento in alto dalla dashboard di WordPress. Qui è possibile configurare il plugin e personalizzare l’effetto di scorrimento fluido.

Da qui, la prima cosa da fare è fare clic sul checkbox ‘Abilitato’ per attivare il pulsante di scorrimento in alto sul sito. Successivamente, verranno visualizzate le opzioni per modificare l’offset dello 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 del tempo di occultamento automatico e l’abilitazione dell’opzione per nascondere il pulsante su dispositivi di piccole dimensioni o nella schermata di wp-admin.

È anche possibile modificare l’azione del pulsante quando lo si clicca. Di default, il pulsante scorre fino all’alto della pagina, ma è possibile modificarlo in modo che scorra fino a un particolare elemento della pubblicazione o anche che si colleghi a una pagina.

Inoltre, è possibile regolare la posizione del pulsante. Sebbene di solito appaia nell’angolo in basso a destra della schermata, si ha l’opzione di spostarlo in qualsiasi altro angolo.

Il plugin WPFront Scroll Top offre filtri per mostrare il pulsante di scorrimento in alto solo su pagine selezionate.

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

Il plugin offre anche dei pulsanti predefiniti. Dovreste essere in grado di trovare facilmente un design in corrispondenza del vostro sito.

Se non riuscite a trovare un pulsante immagine precostituito che faccia al caso vostro, esiste l’opzione di caricare un’immagine personalizzata dalla libreria dei media di WordPress.

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

Ora è possibile visitare il sito web per vedere il pulsante di scorrimento in alto in azione.

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

Prima di iniziare, si noti che questo metodo non è consigliato ai principianti. È adatto a persone che hanno familiarità con la modifica dei temi, perché prevede l’aggiunta di codice al sito web.

Per aggiungere l’effetto di scorrimento in alto, utilizzeremo jQuery, alcuni CSS e una singola riga di codice HTML nel tema di WordPress.

Per prima cosa, apriamo un editor di testo come Notepad e creiamo un file. Lo salviamo con il nome di 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;
		});
});

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

Dopodiché, si può salvare il file e caricarlo nella cartella /js/ della directory del tema di WordPress.

Per maggiori dettagli, consultate la nostra guida su come usare l’FTP per caricare i file su WordPress.

Se il tema non ha una directory /js/, è possibile crearne una e caricarvi smoothscroll.js.

Per ulteriori informazioni, potete consultare la nostra guida sulla struttura dei file e delle directory di WordPress.

La prossima cosa da fare è caricare il file smoothscroll.js nel tema.

Per fare ciò, dobbiamo inserire lo script in WordPress semplicemente copiando e incollando questo codice nel file functions.php del tema.

Tuttavia, non consigliamo di modificare direttamente i file del tema, perché il minimo errore può danneggiare il sito. Si può invece utilizzare un plugin come WPCode e seguire il nostro tutorial sull’aggiunta di snippet di codice personalizzati in WordPress:

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

Il codice precedente indica a WordPress di caricare il nostro script e la libreria jQuery, poiché il nostro plugin dipende da essi.

Ora che abbiamo aggiunto jQuery, aggiungiamo al nostro sito WordPress un link che riporti gli utenti in alto.

Per farlo, è sufficiente incollare questo HTML in un punto qualsiasi del file footer.php del tema utilizzando WPCode. Se avete bisogno di aiuto, consultate il nostro tutorial su come add-on il codice header e footer 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 il pulsante Torna in alto.

In questo esempio, utilizziamo un’icona di 40x40px. È sufficiente aggiungere il CSS personalizzato qui sotto al foglio di stile del 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 al passaggio del mouse dell’utente:

#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 vuole utilizzare.

È possibile caricare la propria icona utilizzando l’uploader di WordPress, copiare l’URL dell’immagine e incollarla nel codice.

E questo è praticamente tutto!

Speriamo che questo articolo vi abbia aiutato ad add-on un effetto di scorrimento fluido sul vostro sito utilizzando jQuery. Vi consigliamo di consultare anche il nostro elenco di cose che DEVONO essere fatte prima di modificare un tema di WordPress e come trovare i file da modificare in un tema di WordPress.

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