Creare Pulsante Torna su con jQuery
Attraverso i codici qui sotto potrete inserire il pulsante “torna su” nel vostro sito, sia che sia in wordpress sia che sia stato creato senza cms.
Il pulsante torna su con jquery funziona in modo tale da far comparire il pulsante solo quando si è già scrollata la pagina, se si è in cima il pulsante non si vede.
Per inserirlo dovete inserire uno striminzito codice html alla fine della vostra pagina, prima della chiusa del tag body:
<div id=”top”>Torna su</div>
#top{width:100px;border:1pxsolid#000;background:#fff;text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;display:none;color:#333
font-size:12px;}
<script src=”js/jquery.js”></script>
<script type=”text/javascript”>
$(function() {
$(window).scroll(function() {
if($(this).scrollTop() != 0) {
//se non siamo in cima alla pagina
$(‘#top’).fadeIn(); //faccio apparire il box
} else {
//altrimenti (il visitatore è in cima alla pagina scrollTop = 0)
$(‘#top’).fadeOut();//Il box scompare
}
});//Allo scroll function$(‘#top’).click(function() {
//Se clicco sul box torno su (scrollTop:0) con un timing di animazione.
$(‘body,html’).animate({scrollTop:0},800);
});//Click});//DOM
</script>
Promozioni
Potrebbe interessarti
Commenti