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 su o giù con un movimento costante e fluido invece di saltare istantaneamente a una sezione. Dovresti usarlo quando vuoi offrire agli utenti un modo meno brusco per navigare su pagine lunghe, specialmente per funzionalità come i pulsanti "torna in cima".
A meno che il sito non disponga di un menu di intestazione fisso, gli utenti che scorrono fino in fondo a un lungo post o pagina di WordPress devono scorrere manualmente o far scorrere il dito per tornare in cima per navigare nel sito.
Questo 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à scivolare 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:
- Suggerimento 1: Aggiungere un effetto di scorrimento fluido verso l'alto utilizzando un plugin per WordPress (Facile)
- Suggerimento 2: Aggiungere l'effetto di scorrimento fluido verso l'alto con jQuery in WordPress (Avanzato)
- Suggerimento Bonus: Altri effetti di animazione sottili per mantenere i visitatori coinvolti
- Domande frequenti: Aggiungere un effetto di scorrimento verso l'alto in WordPress utilizzando jQuery
- Letture aggiuntive: Altre risorse sui temi WordPress
Senza ulteriori indugi, iniziamo con il primo metodo.
Aggiungere un effetto di scorrimento fluido verso l'alto utilizzando un plugin per 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 cosa fa il pulsante quando ci fai clic. Per impostazione predefinita, scorrerà fino alla cima della pagina, ma puoi cambiarlo per scorrere verso un particolare elemento nel post o persino collegare 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 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 di scorrimento verso l'alto in azione.
Aggiungere l'effetto di scorrimento fluido verso l'alto con jQuery in WordPress
Prima di iniziare, tieni presente che questo metodo non è consigliato ai principianti. È adatto a persone che si sentono a proprio agio nell'editare temi perché include l'aggiunta di codice al tuo sito web.
Per aggiungere l'effetto di scorrimento fluido verso l'alto, utilizzeremo jQuery, un po' di CSS e una singola riga di codice HTML nel tuo tema WordPress.
Per prima cosa, apriamo un editor di testo come Blocco note e creiamo un file. Salvalo come smoothscroll.js.
Successivamente, dovrai 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 aggiungerà un effetto di scorrimento fluido a un pulsante che porta gli utenti in cima alla pagina.
Dopodiché, puoi salvare il file e caricarlo nella cartella /js/ nella directory del tuo tema WordPress.
Per maggiori dettagli, consulta la nostra guida su come utilizzare FTP per caricare file su WordPress.
💡 Nota: Non sei sicuro di quale client FTP utilizzare? Il nostro team di sviluppo web di WPBeginner utilizza spesso FileZilla. È un'opzione affidabile e gratuita per la gestione dei file del tuo sito web.
Se il tuo tema non ha una directory /js/, puoi crearne una e caricarci smoothscroll.js.
Puoi anche consultare la nostra guida sulla struttura di file e directory di WordPress per maggiori informazioni.
La prossima cosa da fare è caricare il file smoothscroll.js nel tuo tema.
Per farlo, metteremo in coda lo script in WordPress semplicemente copiando e incollando questo codice nel file functions.php del tuo tema.
Tuttavia, sconsigliamo di modificare direttamente i file del tema perché il minimo errore può compromettere il tuo sito.
Invece, puoi utilizzare un plugin come WPCode, il miglior plugin per snippet di codice per WordPress, 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 );
💡 Nota: Utilizziamo WPCode sui nostri siti aziendali per creare e gestire snippet personalizzati.
Per questo tutorial, la versione gratuita di WPCode è tutto ciò di cui hai bisogno. Tuttavia, se desideri funzionalità avanzate come la pianificazione del codice o una cronologia completa delle revisioni, avrai bisogno di WPCode Pro. Puoi saperne di più nella nostra recensione completa di WPCode.
Il codice sopra 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 un vero e proprio link al nostro sito WordPress che riporta gli utenti in cima.
Per fare ciò, incolla semplicemente questo HTML ovunque nel file footer.php del tuo tema utilizzando WPCode.
<a href="#top" id="smoothup" title="Back to top"></a>
Se hai bisogno di aiuto, consulta il nostro tutorial su come aggiungere codice nell'intestazione e nel piè di pagina di WordPress
Potresti aver notato che il codice HTML include un link ma nessun testo di ancoraggio. Questo perché utilizzeremo un'icona immagine con una freccia verso l'alto per visualizzare un pulsante "torna in cima".
In questo esempio, stiamo utilizzando un'icona 40x40px. Aggiungi semplicemente il CSS personalizzato qui sotto al foglio di stile del tuo tema.
In questo codice, stiamo utilizzando un'icona immagine come immagine di sfondo del pulsante e impostandola in una posizione fissa. Abbiamo anche aggiunto una piccola animazione CSS, che ruota il pulsante quando un utente ci 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 sopra, assicurati di sostituire https://www.example.com/wp-content/uploads/2013/07/top_icon.png con l'URL dell'immagine che desideri utilizzare.
Puoi caricare la tua icona immagine utilizzando l'uploader multimediale di WordPress, copiare l'URL dell'immagine e quindi incollarlo nel codice.
E questo è praticamente tutto!
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 parallasse fa muovere le immagini di sfondo a una velocità diversa rispetto ai tuoi contenuti, creando un senso di profondità e movimento.
È un modo semplice per rendere le tue pagine più vivaci. Per istruzioni passo passo, consulta la nostra guida su come aggiungere un effetto parallasse.
Un effetto di ricerca a comparsa mantiene le cose ordinate mostrando la barra di ricerca solo quando qualcuno fa clic sull'icona. Questo 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. È un piccolo dettaglio, ma fa una grande differenza per chiunque ami esplorare le tue immagini.
Inoltre, i plugin per le 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. Su lunghi post del blog o tutorial, evita ai visitatori la fatica di scorrere fino in cima, il che rende 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 del plugin è leggero e ottimizzato per le prestazioni, e lo snippet di codice jQuery è minuscolo. Pertanto, non avrà alcun impatto apprezzabile 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 del plugin che quello del 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 adattarlo 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. 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 anche trovarci su Twitter e Facebook.
Olaf
Questa piccola icona è ottima per le soluzioni desktop, dove gli utenti devono scorrere molto per tornare in cima. È un bel dettaglio, e personalmente mi piace. Sui dispositivi mobili, lo scopo è in qualche modo perso, poiché lo swipe rapido è disponibile, e a volte il pulsante intralcia. Il plugin menzionato nell'articolo è uno dei pochi nel repository di WordPress che funziona veramente ovunque e come dovrebbe. Lo consiglio e lo uso occasionalmente. Tuttavia, sulla base della mia esperienza, suggerisco di disabilitarlo specificamente sui dispositivi mobili.
Dennis Muthomi
Un consiglio che mi piacerebbe MOLTISSIMO aggiungere è di considerare di abbinare lo schema di colori del pulsante al tema del tuo sito web per un aspetto più coeso.
Questo piccolo dettaglio può fare una grande differenza nell'esperienza utente complessiva.
Mrteesurez
Vedo che implementare una funzione di scorrimento verso l'alto è vantaggioso per i siti web, specialmente per quelli che pubblicano contenuti molto lunghi; gli utenti potrebbero aver bisogno di vedere l'inizio del post o di tornare in cima, quindi questa funzionalità aggiungerà sicuramente un maggiore miglioramento all'esperienza utente. Vedo che la maggior parte dei siti web, incluso WPbeginner, non la utilizza, ma perché?
Ci sono vantaggi nel non usarla, forse per una maggiore fidelizzazione degli utenti o altro?
Puoi includere i pro e i contro in questo post in un aggiornamento successivo.
Supporto WPBeginner
We will look into the possibility for the future, for now we do not have it as personal preference. As someone goes through a tutorial they normally want to see the previous step by scrolling manually and not the start of the article
Amministratore
Mrteesurez
Beh, possibilmente, ma per me il caso d'uso è più che vedere il passaggio precedente negli articoli. Questo articolo ha evidenziato che “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 scorrere per tornare in cima per navigare nel sito. Quella può essere una vera seccatura, 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” Voglio solo sottolineare che i casi d'uso menzionati nell'articolo sono vantaggiosi e giustificano il suo utilizzo. Grazie.
Jiří Vaněk
In precedenza, non avevo un pulsante 'torna in cima' sulla pagina, ma poiché i miei articoli diventavano sempre più lunghi, non volevo che gli utenti impiegassero diversi secondi a scorrere. Ho iniziato a usare questo esatto plugin, ed è fantastico. Migliora significativamente il comfort dell'utente, anche se a prima vista potrebbe sembrare non necessario. Non lo è.
Asha
Grazie mille! È spiegato molto chiaramente. Utile.
Marco
Il metodo Jquery non ha funzionato per me usando un tema figlio di Twenty-seventeen. Pazienza. La versione con hyperlink ha funzionato perfettamente, per fortuna, e per me è abbastanza buona.
Marco
Una domanda… potrebbe essere che il motivo per cui questo non funziona per me (il metodo jquery) sia perché la mia installazione di WordPress si trova in una sottocartella? È l'unica ragione a cui riesco a pensare.
Taffeltrast
Mi piacerebbe molto, ma rompe il footer.php. Il footer semplicemente non viene caricato.
Quando provo ad aggiungerlo al footer.php ottengo “C'è un errore di sintassi alla riga 14. ecc. ecc.”, e quando provo comunque a caricarlo, il footer non viene caricato.
oliver
grazie mille, semplice ed efficace.
la mia opinione, se hai già un file custom.js nel tuo tema puoi semplicemente aggiungere la funzione jquery in questo file invece di crearne uno nuovo e aggiungerlo di nuovo.
Personalmente preferisco avere tutti i miei piccoli script in un unico file.
Stuart
Tema Figlio Progettato da Blank |
<?php }
add_action('wp_head', 'my_favicon');
Cosa sto facendo di sbagliato? Questo è il mio funtions.php nuovo per wp_enqueue_scripts.
Stuart
Twenty Fifteen-Child Theme ha creato una cartella Js ha aggiunto tutti gli wp_enqueue_script ma niente non sono sicuro di cosa sia andato storto. Voglio usare meno plugin possibile sembrano rallentare i siti WordPress. Aggiunto un favicon perfetto wp_enqueue_script è una novità per me. Qualsiasi aiuto?
Donald
Ciao, funziona ancora? L'icona appare (se cambio temporaneamente il CSS in display:block), lo script viene mostrato come caricato nella console degli strumenti per sviluppatori di Firefox. Tuttavia ricevo il seguente messaggio di errore per la riga 1:
‘SyntaxError: missing ; before statement’
Ho copiato lo script come sopra:
01 jQuery(document).ready(function($){
02 $(window).scroll(function(){
03 if ($(this).scrollTop() < 200) {
04 $('#smoothup') .fadeOut();
05 } else {
06 $('#smoothup') .fadeIn();
07 }
08 });
09 $('#smoothup').on('click', function(){
10 $('html, body').animate({scrollTop:0}, 'fast');
11 return false;
12 });
13 });
Qualcuno vede quale potrebbe essere il problema?
Donald
Josh Patterson
C'è un modo per farlo scomparire prima che raggiunga il fondo della pagina?
jaybob
Ciao, funziona bene. Grazie per il tutorial ma ho solo un problema, l'immagine appare troppo velocemente. Posso fare qualcosa affinché appaia più tardi / un po' più in basso, dopo lo scorrimento?
Aaron
Questo è un modo molto pulito per realizzare questo. Di gran lunga il mio preferito che ho trovato.
Domanda veloce… L'ho inserito nel mio file footer.php… Come posso fare in modo che non rimanga fisso a un certo punto? Ad esempio, ho un footer alto 575px e non voglio che l'icona entri in quell'area. In pratica, fermare la posizione fissa a, diciamo, 600px dal fondo della pagina.
Ulv
Questa soluzione aggiungerebbe il file smoothscroll.js alla porzione del file html o…?
emanuele
Ciao,
è possibile aggiungere lo scorrimento fluido nel menu per scorrere la pagina?... Ho creato un modello di pagina singola e voglio farla scorrere tramite il menu... grazie
StefsterNYC
Se ho capito bene, vuoi aggiungerlo alla navigazione del menu principale? Corretto? Usa semplicemente lo stesso nome del selettore ma cambia completamente il CSS. In modo che l'immagine non appaia.
Ha senso?
Paul
Grazie mille per questo consiglio! Tuttavia ho un problema. Quando riduco le dimensioni dello schermo, la mia freccia scompare mentre la voglio in un posto specifico.
C'è un modo per risolvere questo problema?
Grazie
Paul
Paul
Ho trovato una soluzione al mio problema. Ho dovuto solo cambiare il mio css in:
#smoothup { top: 572px; left: auto; margin-left: -68px; }
Mushir
Grazie amico! funziona come per magia... mi hai davvero reso felice!
Steven Wolock
Grazie per questo! Funziona benissimo.
Domanda: quella parentesi graffa chiusa è corretta dopo -webkit-transform: rotate(360deg)?
etech0
L'ho configurato sul mio sito, ma non vedo l'icona! Come posso scoprire perché non funziona?
Grazie!
Supporto WPBeginner
Ci potrebbero essere diverse ragioni possibili. Prima assicurati di aver caricato l'immagine, poi controlla che lo sfondo: url abbia l'URL corretto e che porti alla tua immagine. Infine, controlla che jquery e il tuo file .js siano caricati. Infine, prova a modificare i valori CSS per display, position e text-indent.
Amministratore
etech0
Ho risolto: ho dovuto cambiare l'altezza e la larghezza di 40px per conformarmi alla mia immagine.
Grazie per un ottimo tutorial!
Alexander Gruzov
Grazie!