Bottone Torna in alto a comparsa

bottone torna in alto

In questo articolo vi mostro come mostrare il bottone torna in alto a comparsa con jquery, dopo aver scrollato la pagina.

Passiamo al codice:

<html>
    <head>
        <script type="text/javascript" src="//code.jquery.com/jquery-1.11.2.min.js"></script>
    </head>
<body>
<h2>Esempio bottone torna in alto</h2>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>

<div id="back_to_top"><img width="100" src="freccia-su.jpg"></div>

</body>
</html>

La prima cosa da fare è quella di includere la libreria jquery al nostro sito e di seguito i vari file esterni che ci servono per creare il bottone torna in alto.
All’interno del body abbiamo inserito dei semplici tag
per far si che la pagina sia un po’ più alta. Prima di chiudere il body inseriamo in un div l’immagine per tornare al top della pagina.

Adesso associamo uno stile al nostro bottone torna in alto, creando un file css:

#torna_in_alto{
display:none;
    position: fixed;
    bottom: 15px;
    right: 15px;
    cursor: pointer;
}

Infine, vediamo lo script più interessante per creare il bottone torna in alto.

Creiamo il file js contenente lo script per il nostro bottone torna in alto.

$(document).ready(function()
{
    // scroll dello pagina
    $(window).scroll(function(){
       // mostro l'icona con effetto dissolvenza
        $("#torna_in_alto").fadeIn(500);

       // Se torno ad inizio pagina, nascondo l'icona con effetto dissolvenza
        if ($("body").scrollTop() == 0)
        {
            $("#torna_in_alto").fadeOut(500);
        }
    }); // fine scroll pagina

    // Al click sull'icona, torno ad inizio pagina
    $("#torna_in_alto").click(function(){
        $("html,body").animate({scrollTop: 0}, 500, function(){});
    });
});

Ora spieghiamo questo semplice script.
Quando scrollo la pagina, la prima istruzione che lo script esegue è quella di mostrare il bottone torna in alto con effetto fade. Se, sempre scrollando la pagina, torno al top, nascondo il bottone torna in alto, sempre con effetto fade.
Quando clicco sul bottone porto la pagina al top con la funzione animate.
Ovviamente l’immagine non rende, quindi potete vedere un vi segnalo il link per provare il bottone torna in alto.

Lascia un commento

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