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

Ti sei mai ritrovato a scorrere un lungo post del blog di WordPress o una pagina prodotto sul tuo telefono, solo per renderti conto di dover scorrere fino in cima solo per trovare il menu? I tuoi visitatori potrebbero provare lo stesso.

Su pagine più lunghe, questo piccolo inconveniente può trasformarsi rapidamente in frustrazione. E alcuni potrebbero semplicemente abbandonare il tuo sito WordPress invece di tornare indietro.

Un pulsante di scorrimento fluido verso l'alto può aiutarti a risolvere questo problema all'istante. Questa funzione offre ai lettori un modo rapido per tornare indietro, il che può mantenerli coinvolti e incoraggiarli a esplorare ulteriormente il tuo sito.

In questa guida, ti spiegheremo esattamente come aggiungere un effetto di scorrimento fluido verso l'alto in WordPress usando jQuery. Non preoccuparti, è più semplice di quanto pensi! 💡

Cos'è lo scorrimento fluido e quando dovresti usarlo?

Lo scorrimento fluido è un effetto di navigazione che sposta la pagina verso l'alto o verso il basso con un movimento costante e fluido invece di saltare istantaneamente a una sezione.

A meno che il sito non disponga di un menu di intestazione fisso, gli utenti che scorrono fino alla fine di un lungo post o pagina di WordPress devono scorrere manualmente o tornare indietro per navigare nel sito.

Ciò può essere un vero fastidio e, spesso, gli utenti premeranno semplicemente il pulsante indietro e se ne andranno. Ecco perché hai bisogno di un pulsante per inviare rapidamente gli utenti in cima al post o alla pagina.

In genere, puoi aggiungere questa funzionalità come un semplice link di testo senza usare jQuery, in questo modo:

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

Questo invierà gli utenti in cima scorrendo l'intera pagina in millisecondi. Funziona, ma l'effetto può essere brusco, un po' come quando si colpisce una buca nella strada.

Uno scorrimento fluido è l'opposto di questo. Farà scorrere l'utente verso l'alto con un effetto visivamente gradevole. L'utilizzo di elementi come questo può migliorare drasticamente l'esperienza utente sul tuo sito.

Tenendo conto di ciò, condivideremo due metodi per aggiungere un effetto di scorrimento fluido verso l'alto sul tuo sito WordPress utilizzando un plugin e jQuery. Ecco una rapida panoramica di tutte le cose che tratteremo in questa guida:

Senza ulteriori indugi, iniziamo con il primo metodo.

Suggerimento 1: Aggiungere un effetto di scorrimento fluido verso l'alto utilizzando un plugin WordPress

Questo metodo è consigliato ai principianti poiché ti consente di aggiungere un effetto di scorrimento verso l'alto a un sito web WordPress senza toccare una singola riga di codice.

La prima cosa che dovrai fare è installare e attivare il plugin WPFront Scroll Top. Se hai bisogno di aiuto, consulta la nostra guida su come installare un plugin di WordPress.

Dopo l'attivazione, puoi andare su Impostazioni » Scroll Top dalla tua bacheca di WordPress. Qui puoi configurare il plugin e personalizzare l'effetto di scorrimento fluido.

Da qui, la prima cosa che dovrai fare è fare clic sulla casella di controllo 'Abilitato' per attivare il pulsante di scorrimento verso l'alto sul tuo sito. Successivamente, vedrai le opzioni per modificare l'offset di scorrimento, la dimensione del pulsante, l'opacità, la durata dello svanimento, la durata dello scorrimento e altro ancora.

Scorrendo verso il basso, troverai altre opzioni, come la modifica del tempo di nascondimento automatico e l'abilitazione dell'opzione per nascondere il pulsante sui dispositivi piccoli o nella schermata wp-admin.

Puoi anche modificare ciò che fa il pulsante quando fai clic su di esso. Per impostazione predefinita, scorrerà fino alla cima della pagina, ma puoi cambiarlo per scorrere verso un elemento particolare nel post o persino collegarti a una pagina.

Inoltre, puoi regolare la posizione del pulsante. Sebbene di solito appaia nell'angolo in basso a destra dello schermo, hai la possibilità di spostarlo in qualsiasi altro angolo.

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

Normalmente, apparirà su tutte le pagine del tuo blog di WordPress.

Tuttavia, puoi navigare nella sezione 'Mostra su Pagine' e scegliere dove desideri visualizzare l'effetto di scorrimento verso l'alto.

Il plugin offre anche design di pulsanti predefiniti. Dovresti essere in grado di trovare facilmente un design che si abbini al tuo sito.

Se non riesci a trovare un pulsante immagine predefinito che funzioni per te, c'è un'opzione per caricare un'immagine personalizzata dalla libreria multimediale di WordPress.

Una volta terminato, fai semplicemente clic sul pulsante 'Salva modifiche'.

Ora puoi visitare il tuo sito web WordPress per vedere il pulsante scorri-in-alto in azione.

Suggerimento 2: Aggiungere l'effetto di scorrimento fluido verso l'alto con jQuery in WordPress

In questo metodo, aggiungeremo l'effetto di scorrimento fluido verso l'alto utilizzando jQuery, un po' di CSS e una singola riga di codice HTML. Il nostro team ha testato e verificato manualmente questo snippet di codice esatto su un'installazione WordPress pulita per garantire che funzioni senza compromettere la funzionalità del tema.

Detto questo, molti tutorial ti chiederanno di modificare i file del tuo tema per aggiungere un pulsante di scorrimento fluido verso l'alto. Ma questo non è molto adatto ai principianti, anche un piccolo errore potrebbe danneggiare il tuo sito.

Ecco perché consigliamo di utilizzare WPCode ogni volta che si desidera aggiungere funzionalità personalizzate come un effetto di scorrimento fluido. È il miglior plugin per snippet di codice per WordPress e ti consente di aggiungere in modo sicuro snippet personalizzati, il tutto senza toccare i file del tuo tema.

Alcuni dei nostri marchi partner utilizzano WPCode per aggiungere e gestire i loro snippet di codice personalizzati, e funziona molto bene.

Per saperne di più, puoi consultare la nostra recensione completa di WPCode per vedere tutte le sue funzionalità.

Innanzitutto, devi installare e attivare il plugin gratuito WPCode. Se hai bisogno di aiuto, consulta la nostra guida su come installare un plugin di WordPress.

Una volta attivato, vai su Snippet di codice » + Aggiungi snippet dalla tua bacheca di WordPress.

Nella schermata successiva, vedrai la libreria di snippet di codice di WPCode.

Fai clic su 'Usa snippet' sotto 'Aggiungi il tuo codice personalizzato (Snippet personalizzato)'.

Apparirà un popup per chiederti il tipo di codice.

Assicurati di selezionare 'Snippet JavaScript'.

Ora che sei nell'editor di codice, diamo prima un nome chiaro al tuo snippet di codice personalizzato. Questo è solo per riferimento, ma ti consigliamo di utilizzare un nome chiaro e descrittivo.

Quindi, incolla il seguente codice nella casella ‘Anteprima codice’:

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 script jQuery fa tutto il lavoro pesante per il tuo effetto di scorrimento fluido.

Innanzitutto, nasconde il pulsante finché l'utente non scorre verso il basso di 200 pixel. Quando l'utente fa clic sul pulsante, lo script anima fluidamente la pagina per tornare a 0 pixel (la parte superiore).

Abbiamo anche incluso una riga return false; per impedire il comportamento predefinito del collegamento HTML, che farebbe saltare istantaneamente l'utente in cima rovinando l'animazione.

Ecco come potrebbe apparire sullo schermo:

Successivamente, scorri verso il basso fino alla sezione ‘Inserimento’.

Innanzitutto, assicurati di aver selezionato 'Inserimento automatico'. Questo garantisce che lo snippet venga eseguito automaticamente sul tuo sito senza richiedere un posizionamento manuale.

Quindi, controlliamo la posizione.

Ci sono molte opzioni tra cui scegliere, tra cui intestazione, piè di pagina, menu di navigazione e altro ancora. Per un pulsante di scorrimento verso l'alto, 'Piè di pagina dell'intero sito' è un'ottima opzione perché garantisce che il pulsante sia disponibile su tutte le pagine senza interferire con i contenuti del tuo sito.

Fatto ciò, puoi attivare l'interruttore su 'Attivo' in modo che lo script inizi a funzionare immediatamente sul tuo sito.

E dopo, non dimenticare di fare clic sul pulsante 'Salva snippet' per abilitare lo script.

Ora che abbiamo aggiunto jQuery, aggiungiamo un vero e proprio link al nostro sito WordPress che riporta gli utenti in cima.

Per fare ciò, aggiungi semplicemente questo HTML al footer del tuo sito utilizzando WPCode.

Vai su Snippet di codice » Intestazione e piè di pagina e aggiungi questo snippet all'area 'Piè di pagina':

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

Non dimenticare di fare clic su 'Salva modifiche' quando hai finito. Se hai bisogno di aiuto, consulta il nostro tutorial su come aggiungere codice nell'intestazione e nel piè di pagina in WordPress

Se visualizzi il tuo sito in questo momento, non vedrai alcun pulsante. Questo perché il nostro codice HTML include un link, ma nessun testo di ancoraggio. Attualmente è completamente invisibile.

Per risolvere questo problema, utilizzeremo un'icona immagine (come una freccia verso l'alto) per visualizzare un pulsante di ritorno in cima alla pagina. Per fare ciò, dovrai aggiungere un CSS personalizzato.

Puoi aggiungere il CSS nel foglio di stile del tuo tema o tramite WPCode. L'utilizzo di WPCode è più sicuro perché non andrà perso se aggiorni il tuo tema.

Prima di aggiungere il codice, dovrai:

1. Carica un'icona immagine (come una freccia) nella tua Libreria multimediale di WordPress. La dimensione può essere quella che funziona meglio per il tuo sito: abbiamo usato 40x40px come esempio. Se utilizzi una dimensione diversa, assicurati di modificare i valori di height e width nel codice CSS sottostante.
2. Copia l'URL dell'immagine che hai appena caricato. Quindi, assicurati di sostituire l'URL dell'immagine segnaposto (https://www.example.com/wp-content/uploads/2013/07/top_icon.png) nello snippet CSS sottostante con il tuo URL dell'immagine effettivo.

Ciò garantirà che il tuo pulsante di scorrimento verso l'alto venga visualizzato correttamente e abbia l'effetto di rotazione al passaggio del mouse.

Ora navighiamo su Snippet di codice » + Aggiungi snippet.

Successivamente, puoi passare il mouse su 'Aggiungi il tuo codice personalizzato (Snippet personalizzato)'.

Fai clic sul pulsante 'Usa snippet' quando appare.

Nel popup che appare, dovrai scegliere un tipo di codice.

Selezioniamo ‘Snippet CSS’.

Nell'editor, procedi e dai al tuo snippet di codice personalizzato un nome chiaro per una facile organizzazione.

Quindi, puoi aggiungere il seguente codice CSS personalizzato nella casella 'Anteprima codice':

<pre class="wp-block-syntaxhighlighter-code">#smoothup {
    height: 40px;
    width: 40px;
    position: fixed;
    bottom: 50px;
    right: 20px;
    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);
    transform: rotate(360deg);
}</pre>

Questo CSS lo imposta su una dimensione e posizione fissa dell'icona, oltre ad aggiungere una piccola animazione al passaggio del mouse che ruota il pulsante.

Non è necessario modificare nulla in Inserimento. Ciò garantisce che il CSS venga applicato su tutto il sito senza influire su altri elementi.

Infine, attiva l'interruttore per attivare lo snippet e fai clic su 'Salva modifiche'.

E questo è praticamente tutto!

Ora puoi visitare il tuo sito web per vedere il tuo scorrimento fluido verso l'alto in azione:

Suggerimento Bonus: Altri effetti di animazione sottili per mantenere i visitatori coinvolti

Un pulsante di scorrimento fluido verso l'alto è solo un modo per rendere il tuo sito più facile da usare. Ci sono molti altri piccoli effetti di animazione che puoi aggiungere per attirare delicatamente l'attenzione e rendere la navigazione del tuo sito senza sforzo.

Ad esempio, un effetto parallax fa muovere le immagini di sfondo a una velocità diversa rispetto ai tuoi contenuti, creando un senso di profondità e movimento. I moderni page builder come SeedProd hanno questa funzionalità integrata, permettendoti di creare questo effetto senza scrivere codice.

È un modo semplice per rendere le tue pagine più vivaci. Per istruzioni passo passo, consulta la nostra guida su come aggiungere un effetto parallax.

Un effetto di ricerca a comparsa mantiene le cose ordinate mostrando la barra di ricerca solo quando qualcuno fa clic sull'icona. Questa funzione nasconde il campo di immissione della ricerca finché un utente non fa clic attivamente su un pulsante per rivelarlo. Ciò aiuta il tuo design a sembrare meno disordinato, pur rendendo facile per i visitatori trovare ciò di cui hanno bisogno.

Se il tuo tema non lo include già, plugin come WPCode possono aiutarti. Per i dettagli, consulta la nostra guida su come aggiungere un effetto di ricerca a comparsa in WordPress.

E se hai una galleria di immagini, un effetto lightbox consente alle persone di visualizzare le foto in un pop-up più grande e senza distrazioni, senza lasciare la pagina. Questo effetto overlay visualizza le immagini in una finestra focalizzata attenuando il resto della pagina. È un piccolo dettaglio, ma fa una grande differenza per chiunque ami esplorare le tue immagini.

Inoltre, i plugin per gallerie come Envira Gallery rendono facile l'aggiunta di questa funzionalità. Per farlo, puoi fare riferimento alla nostra guida su come aggiungere una galleria in WordPress con effetto lightbox.

Questi tocchi non sono solo "piacevoli da avere"; mostrano ai visitatori che hai pensato alla loro esperienza. Questo può renderli più propensi a rimanere ed esplorare. 🕵️

Domande frequenti: Aggiungere un effetto Scroll-to-Top in WordPress utilizzando jQuery

Prima di concludere, ecco alcune domande comuni che i lettori hanno sull'aggiunta di un pulsante di scorrimento verso l'alto in WordPress.

È necessario un pulsante di scorrimento verso l'alto per ogni sito web?

Non sempre. Ma è un'aggiunta intelligente per le pagine con molti contenuti. Nei lunghi post del blog o nei tutorial, evita ai visitatori la fatica di scorrere fino in cima, rendendo la loro esperienza di navigazione più piacevole.

L'aggiunta di un pulsante di scorrimento verso l'alto rallenterà il mio sito?

Non dovrebbe. Il metodo con plugin è leggero e ottimizzato per le prestazioni, e lo snippet di codice jQuery è minuscolo. Quindi, non avrà alcun impatto evidente sulla velocità del tuo sito.

Dove è il posto migliore per posizionare il pulsante di scorrimento verso l'alto?

La maggior parte dei siti lo posiziona nell'angolo in basso a destra dello schermo. Questa posizione lo mantiene visibile e facile da raggiungere senza distrarre dal contenuto principale.

Posso usare un link di testo invece di un'immagine per il mio pulsante?

Assolutamente. Sia il metodo con plugin che quello con codice personalizzato possono essere configurati con un semplice link di testo "Torna in cima" invece di un'icona. Il plugin offre questa opzione pronta all'uso e con il metodo del codice, basta modificare l'HTML e il CSS per adattarli al tuo stile.

Letture aggiuntive: Altre risorse sui temi WordPress

Speriamo che questo articolo ti abbia aiutato ad aggiungere un effetto di scorrimento fluido verso l'alto sul tuo sito utilizzando jQuery. Personalizzare il tuo tema con funzionalità come questa è solo un passo per costruire un sito user-friendly. Vuoi approfondire i temi di WordPress? Queste risorse ti aiuteranno:

• Temi WordPress più popolari e migliori
• Cosa succede quando cambi il tuo tema WordPress?
• Cose che DEVI FARE prima di cambiare tema WordPress
• Cos'è un framework per temi WordPress e quali sono i migliori framework per temi?
• Come personalizzare il tuo tema WordPress
• Come trovare i file da modificare in un tema WordPress
• Come usare il personalizzatore di temi WordPress come un professionista
• Guida completa per principianti all'editor completo del sito di WordPress

Se ti è piaciuto questo articolo, iscriviti al nostro Canale YouTube per tutorial video su WordPress. Puoi trovarci anche su Twitter e Facebook.