Come aggiungere il bottone “Torna su” con jQuery


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.

<a href="#" class="scrollup">Torna su</a>

Adesso aggiungiamo le regole CSS per questo bottone:

.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;
}

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

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

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:

    $(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;
        });

    });

Se ci sono domande non esitate a chiedere!

Grazie!

Rate this post

2 thoughts on “Come aggiungere il bottone “Torna su” con jQuery

  1. Alberto ha detto:

    Mi funziona solo il classico, il jQuery non riesco ad applicarlo. Questi sono i miei codici:

    CSS
    .torna-su {
    float: right;
    display: block !important;
    border-bottom: 1px solid #e5e6e5;
    visibility: visible !important;
    }

    HTML
    ↑ Torna su

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *


Hai bisogno di aiuto personalizzato con qualcosa che non è documentato qui? Richiedi assistenza
Iscriviti alla nostra newsletter

Iscriviti alla nostra newsletter

Iscriviti alla nostra mailing list per ricevere le ultime notizie e gli aggiornamenti dal nostro team.

You have Successfully Subscribed!