disign.it | Jquery: link al top pagina a scomparsa | a digital sign for a best design!
A digital sign for a best design
Javascript 3.184 visualizzazioni

Jquery: link al top pagina a scomparsa

02/05/2012

L'altezza di visualizzazione di una pagina web è una variabile dipendente dalla risoluzione dello schermo dell'utente, pertanto non è sempre possibile determinare se sia necessario inserire il classico link 'torna al top page'.

Con Jquery possiamo intervenire, applicando oltretutto un effetto fade al div che contiene il link top, div che apparirà solo quando la barra di scorrimento verticale sarà a una distanza diversa da zero!

Caricata l'ultima versione di Jquery, (qui l'articolo sul come fare), il nostro script sarà questo:


$(document).ready(function(){

// nascondiamo il div di link al top
$(".toTop").hide();

// fade in div di link al top

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

// scroll del body a 0px al click
$('.toTop a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});

});

Assegnamo al tag body l'id top, e posizioniamo dove serve il div

<div class="toTop"><a href="#top">top pagina</a></div>

top
← Jquery: seleziona / deseleziona checkbox Javascript: l'evento oncopy e il copyright →

Invia una domanda o un commento sull'articolo

I campi obbligatori sono segnalati *

*

*



 

© 2009 - 2017 Impronte digitali di Luca Frassineti. Tutti i diritti riservati.