Come aggiungere il bottone “Torna su” con jQuery

Se la pagina ha un sacco di contenuto, è una buona idea fornire ai visitatori un modo semplice per passare rapidamente alla parte superiore della pagina. In questo tutorial, creeremo un effetto liscio di scorrimento della pagina per tornare al top utilizzando jQuery.

Creeremo un pulsante in una posizione fissa in basso a destra della pagina, in modo una volta cliccato, scorre verso l’alto con una bella animazione al posto di un salto dritto verso l’alto. Faremo il pulsante visibile solo se ci troviamo nella parte inferiore della pagina, invece di essere sempre visibile.

In primo luogo, permette di aggiungere il collegamento del pulsante sulla pagina, in modo che quando si fa clic, si può scorrere la pagina verso l’alto.

[code language=”php”]
<a href="#" class="scrollup">Torna su</a>
[/code]

Adesso aggiungiamo le regole CSS per questo bottone:

[code language=”css”]
.scrollup{
width:40px;
height:40px;
opacity:0.3;
position:fixed;
bottom:50px;
right:100px;
display:none;
text-indent:-9999px;
background: url(‘icon_top.png’) no-repeat;
}
[/code]

Ora vogliamo rendere il pulsante visibile se la pagina si scorre verso il basso. Possiamo farlo con jQuery.

[code language=”php”]
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$(‘.scrollup’).fadeIn();
} else {
$(‘.scrollup’).fadeOut();
}
});
[/code]

Il scrollTop: 0 scorre fino alla cima della pagina, nella posizione 0 px, e la 600 rappresenta la durata dell’animazione in millisecondi. I valori più alti indicano le animazioni più lente. È inoltre possibile utilizzare ‘fast’, ‘slow’ o ‘normal’ invece di millisecondi.

Qui è il codice completo jQuery:

[code language=”php”]
$(document).ready(function(){

$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$(‘.scrollup’).fadeIn();
} else {
$(‘.scrollup’).fadeOut();
}
});

$(‘.scrollup’).click(function(){
$("html, body").animate({ scrollTop: 0 }, 600);
return false;
});

});
[/code]

Se ci sono domande non esitate a chiedere!

Grazie!