Come aggiungere una pergamena scorrevole a Top Effect in WordPress usando jQuery

Hai visto siti Web che aggiungono una scroll scorrevole all'effetto top of page? Questo è fantastico quando hai una pagina lunga e vuoi dare ai tuoi utenti un modo semplice per tornare in cima. Recentemente uno dei nostri lettori ci ha chiesto di aggiungere una scroll scorrevole ad effetto top in WordPress. In questo articolo, ti mostreremo come aggiungere una scroll scorrevole all'effetto principale in WordPress usando jQuery.

Nota: questo tutorial è stato creato per un utente intermedio fai-da-te che stia comodamente modificando i temi. Se si desidera utilizzare un metodo di plug-in, quindi utilizzare lo scorrimento della pagina scorrevole per il plug-in principale. Per coloro che vogliono imparare come farlo senza un plugin, quindi continua a leggere.

Che cos'è Smooth Scroll e When to use it?

Quando una pagina o un post ha un sacco di contenuti, gli utenti sono costretti a scorrere verso il basso per leggere quei contenuti. Mentre gli utenti scorrono verso il basso, tutti i tuoi collegamenti di navigazione aumentano. Quando gli utenti hanno finito di leggere quell'articolo devono scorrere verso l'alto per vedere cos'altro fare sul tuo sito web. Scorrere verso l'alto pulsante invia rapidamente gli utenti nella parte superiore della pagina. Puoi aggiungerlo come link di testo senza usare jQuery, come questo:

 ^ Top 

Invia semplicemente gli utenti nella parte superiore della pagina e scorre l'intera pagina in millisecondi. È funzionale, ma un po 'come un urto sulla strada. Lo scorrimento uniforme è opposto a quello. Fa scorrere facilmente l'utente in cima alla pagina. Questo crea un buon effetto e migliora l'esperienza dell'utente.

Aggiunta di Scorrimento scorrevole a Top Effect con jQuery in WordPress

Per aggiungere una scroll scorrevole all'effetto principale, utilizzeremo jQuery, alcuni CSS e una singola riga di codice HTML nel tuo tema WordPress. Per prima cosa apri un editor di testo come Blocco note. Crea un file e salvalo come smoothscroll.js. Copia e incolla 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; ); ); 

Salva il file e caricalo nella directory dei temi di WordPress / Js / cartella (vedi Come usare FTP per caricare file su WordPress). Se il tuo tema non ha un / Js / directory, quindi crearne uno e caricarlo smoothscroll.js ad esso. Questo codice è lo script jQuery che aggiungerà un effetto di scorrimento uniforme a un pulsante che porta gli utenti in cima alla pagina.

La prossima cosa che devi fare è aggiungere il smoothscroll.js al tuo tema. Per farlo bene, accodare lo script in WordPress (maggiori informazioni nella nostra guida su come aggiungere correttamente gli script in WordPress). Copia e incolla questo codice sul tema functions.php file.

 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 caricare anche la libreria jQuery poiché il nostro plugin dipende da esso. Ora che abbiamo aggiunto la parte jQuery, aggiungiamo un collegamento reale al nostro sito WordPress che riporta gli utenti all'inizio. Incolla questo codice HTML in qualsiasi punto del tuo tema footer.php file.

Come hai notato, abbiamo aggiunto un link ma non lo abbiamo collegato a nessun testo. Questo perché useremo l'icona di un'immagine con la freccia rivolta verso l'alto per visualizzare un pulsante Torna all'inizio. In questo esempio stiamo usando un'icona 40x40px. Aggiungi questo al foglio di stile del tuo tema.

 #smoothup height: 40px; larghezza: 40px; position: fixed; bottom: 50px; destra: 100px; text-trattino: -9999px; display: none; background: url ("http://www.example.com/wp-content/uploads/2013/07/top_icon.png"); -webkit-transition-duration: 0.4s; -moz-transition-duration: 0.4s; durata della transizione: 0.4 s;  #smoothup: hover -webkit-transform: rotazione (360deg) background: url (") no-repeat; 

Nel CSS sopra, abbiamo usato la posizione fissa per la nostra icona immagine e usato un'icona immagine come immagine di sfondo. Puoi caricare la tua icona immagine utilizzando WordPress media uploader e quindi ottenere l'URL dell'immagine per incollarlo come URL di sfondo. Abbiamo anche aggiunto una piccola animazione CSS al pulsante che ruota il pulsante quando un utente passa il mouse sopra di esso.

Scorri verso l'alto per consentire agli utenti di tornare in cima e trovare altre cose da fare sul tuo sito web. Un'altra cosa che puoi fare è aggiungere una barra di piè di pagina fluttuante come quella che abbiamo sul nostro sito per visualizzare i contenuti in primo piano. Se non vuoi che i tuoi utenti scorrano verso l'alto per condividere il tuo articolo, ti consigliamo vivamente di utilizzare il plug-in della barra di condivisione sociale mobile come abbiamo su WPBeginner.

Ci auguriamo che questo articolo ti abbia aiutato ad aggiungere uno scorrimento fluido all'effetto superiore della pagina sul tuo sito utilizzando jQuery. Per vedere alcuni altri fantastici usi di jQuery in WordPress puoi consultare il nostro articolo sulla fisarmonica FAQ jQuery o l'articolo sulle immagini di caricamento pigro.

Pensi che scorrere fino all'effetto superiore sia utile? Facci sapere lasciando un commento qui sotto.