WordPress — Scroll Back To Top Button

Scroll Back To Top Button

WordPress: Scroll Back To Top Button !

Vuoi offrire ai tuoi utenti la possibilità di tornare rapidamente fino alla parte superiore della pagina del tuo sito, ma per farlo non vuoi installare nessun plugin, per non appesantire ulteriormente WordPress ? Bene: grazie all’ottimo tutorial che ho trovato su wpmudev.org, puoi farlo facilmente.

wordpress scroll back to top

I passaggi per configurare il pulsante sono semplici, ma è importante eseguire prima il backup dei files style.css e functions.php del tuo tema, per poterli ripristinare in caso di problemi. Inoltre, è sempre consigliabile effettuare qualsiasi modifica su uno child theme ovvero un tema “bambino”, in modo che tutte le modifiche apportate non saranno cancellate dagli aggiornamenti futuri del tema originale.

Iniziamo !

Per prima cosa bisogna accedere al tuo sito web tramite FTP oppure da cPanel e trovare la cartella JavaScript, che di solito si trova in wp-content> Temi> il tuo tema> js. Ovviamente, se il tema non contiene una cartella js, creane una.

Successivamente, sempre dentro la cartella (js) devi creare un nuovo file, copiare ed incollare il codice sottostante ed infine salvarlo con il nome topbutton.js.

jQuery(document).ready(function($){
var offset = 100;
var speed = 250;
var duration = 500;
$(window).scroll(function(){
if ($(this).scrollTop() < offset) {
$(‘.topbutton’) .fadeOut(duration);
} else {
$(‘.topbutton’) .fadeIn(duration);
}
});
$(‘.topbutton’).on(‘click’, function(){
$(‘html, body’).animate({scrollTop:0}, speed);
return false;
});
});

Niente paura, puoi scaricare il file già pronto da questo link.

Il passo successivo è quello di caricare l’immagine preferita (preferibilmente con licenza GPL che è possibile utilizzare gratuitamente) e prendere nota del collegamento diretto dell’immagine, perché servirà per il passo successivo.

Libreria ‹ blasco-net — WordPress

Abbiamo quasi finito. Apri il file style.css del tuo tema, incolla il codice sottostante e salva il tutto:

.topbutton {
height:50px;
width:50px;
position:fixed;
right:5px;
bottom:5px;
z-index:1;
background-image: url(“Qui devi inserire l’indirizzo completo della tua immagine“);
background-repeat:no-repeat;
display:none;
}

Se vuoi, puoi scaricare il file già pronto da questo link.

Edita il file functions.php, incolla questo codice e salva:

function my_scripts_method() {
wp_enqueue_script(
‘custom-script’,
get_stylesheet_directory_uri() . ‘/js/topbutton.js’,
array( ‘jquery’ )
);
}add_action( ‘wp_enqueue_scripts’, ‘my_scripts_method’ );

Se vuoi, puoi scaricare il file già pronto da questo link.

Infine, edita il file footer.php e copia ed incolla questo link nel piè di pagina:

<a href=”#” class=”topbutton”></a>

Fatto !

Se invece non desideri fare tutto da solo, ti consiglio “jquery-smooth-scroll” un comodo plugin, che farà tutto il lavoro sporco per te senza problemi.

Utilizziamo cookies, anche di terze parti. Maggiori informazioni. Cookies Policy. Cookies Setting.