Come inserire un pulsante “Scroll to Top” in WordPress con poche righe di codice

 

Scroll to Top – In questo tutorial vedremo come sia possible inserire con facilità un pulsante “Scroll to Top” (o “torna su”) in WordPress e con poche righe di codice. Il tutto senza l’utilizzo di alcun plugin.

Un pulsante “Scroll to Top” o “torna su” può essere molto utile ai vostri visitatori per facilitare la navigazione sopratutto quando ci si trovi in presenza di pagine molto lunghe verticalmente.

Finita la consultazione invece che l’utente scrolli con il mouse ripetutamente per tornare in alto alla pagina, il pulsante di “Scroll to Top“, con un click, lo riportera comodamente in cima alla pagina in un attimo.

Il codice che vi propongo permette di attivare il pulsante Scroll to Top non appena l’utente scrolla la pagina di un tot di pixel. La comparsa e la scomparsa del pulsante includono un effetto fade (a dissolvenza).

Scroll to Top – Codice per l’implementazione del pulsante

Aprite il file footer.php del vostro tema di WordPress. Prima della chiusura del tag </body> inserite il seguente codice.

Inserite l’indirizzo dell’immagine che volete utilizzare come pulsante. Inseritelo al posto di indirizzo_immmagine_desiderata.

Per trovare un’immagine adatta alle vostre esigenze vi consiglio di consultare iconsdb.com dove potrete trovare tantissime icone di cui potrete personalizzarne anche il colore a piacimento. Una volta scelta l’icona, scaricatela in formato PNG.

I parametri di stile bottom:15px; right:15px; specificano la distanza del pulsante rispettivamente dal basso e dal margine destro della pagina. Potete modificarli secondo le vostre esigenze o lasciarli invariati.

A questo punto inserite a seguire il seguente codice.

Per una demo potete semplicemente guardare questa stessa pagina e noterete che scrollandola verso il basso apparirà un’icona con una “scala mobile” che cliccandola vi riporterà in un attimo ad inizio pagina.
Questo è tutto, buon lavoro e alla prossima risorsa gratuita!

pixolo ads
Animal Comix
7309 | Articolo pubblicato 3 anni fa nella categoria In evidenza, Trucchi e modifiche.
Puoi seguire tutti i nuovi articoli e gli aggiornamenti di Pixolo.it attraverso i Pixolo feeds feed RSS.
Puoi inoltre lasciare un commento, oppure fare un trackback dell'articolo dal tuo sito.