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. Cliccando su "Accetta Cookies", accetterai termini e condizioni. Se vuoi saperne di più, negare o revocare il consenso, consulta la nostra politica sui cookies. Informativa estesa.

Cookie settings

Di seguito è possibile scegliere quale tipo di cookie permettere su questo sito. Fai clic sul pulsante "Salva impostazioni cookies" per applicare la tua scelta.

Funzionaliblasco-net utilizza Cookies per salvare la sessione dell'Utente e per svolgere altre attività strettamente necessarie al funzionamento del sito.

Analiticiblasco-net non utilizza questo tipo di cookies.

Social mediaQuesto tipo di cookies permette di effettuare interazioni con i social network, o con altre piattaforme esterne, direttamente dalle pagine di blasco-net.

PubblicitàAttualmente non utilizziamo alcun sistema per l'advertising.

AltriQuesto tipo di cookies permettono di visualizzare contenuti ospitati su piattaforme esterne (es. YouTube) direttamente dalle pagine di blasco-net e di interagire con essi.