Come inserire due bottoni per andare a inizio e a fondo pagina.

Come inserire due bottoni per spostarsi a inizio e a fondo pagina con un movimento continuo tramite l'utilizzo della libreria JQuery.

Vediamo come utilizzare la libreria JQuery per un effetto che è sempre molto richiesto vale a dire i bottoni per spostarsi al top e a fondo pagina. Ho notato però che questo effetto non funziona se si cambia versione di JQuery ma non è un grosso problema se si è deciso di utilizzarlo.

Sempre sull'argomento dei bottoni di navigazione dentro il post ricordo la serie di pulsanti con cinque stili diversi e le icone con up, down e scroll. Come al solito dopo aver salvato il template si va su Modello > Modifica HTML e si cerca la riga ]]></b:skin> . Subito sopra si incolla il codice seguente

/* Bottone Up e Bottone Down con jQuery
----------------------------------------------- */
.bottone_su {
padding:8px; /* Distanza tra bordo e bottone */background-color:white;
border:1px solid #CCC; /* Colore del bordo */
position:fixed;
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7Gd95VA_3-WP4mPhe-hjDNldTWOTQ5nLuEXBsTuhUg3cwjMwelGNXCHlZfHFFa3Evh3fTW7YHvft5agUjROISxu0JG_l965Mqg_C4EVwBquAyo1EPdvS6xH0FR2B3fJmBN17wTaE8KL4v/s28/freccia_su.png) no-repeat top left;
background-position:50% 50%;
width:24px; /* Larghezza del bottone */height:24px; /* Altezza del bottone */bottom:300px; /* Distanza dal basso */left:5px; /* Bottone sulla sinistra. Per bottone sulla destra right al posto di left */white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); /* Opacità */
}
.bottone_giu {
padding:8px; /* Distanza tra bordo e bottone  */
background-color:white;
border:1px solid #CCC; /* Colore del bordo */
position:fixed;
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid6LIR2Yd_ogg13xpyFWfsRf8ro7H_J6EFY5dsvkN_TBPAJ0KKNWZL4ZoIo7ilDXhXZdJouIxWviDyL4lykybXsVlbX80p1l6QA1l6EGttfQevESabE5WjcFlXtMq8dhyAC_Vj7-2_NmkA/s28/freccia_down.png) no-repeat top left;
background-position:50% 50%;
width:24px; /* Larghezza del bottone */height:24px; /* Altezza del bottone */bottom:260px; /* Distanza dal basso */left:5px; /* Bottone sulla sinistra. Per bottone sulla destra right al posto di left */white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); /* Opacità */}

dove i parametri in rosso possono essere personalizzati e i commenti in verde indicano a cosa si riferisce ciascuno di essi. Da notare che la distanza dal basso dei due bottoni è diversa visto che devono stare uno di sopra all'altro in questo modo

Successivamente si cerca la riga </body> e, subito sopra, si incolla quest'altro codice

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<div class='bottone_su' id='bottone_su' style='display:none;'/>
<div class='bottone_giu' id='bottone_giu' style='display:none;'/>
<script>
//<![CDATA[
(function(){var special=jQuery.event.special,uid1='D'+(+new Date()),uid2='D'+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})();
$(function() {
var $elem = $('body');
$('#bottone_su').fadeIn('slow');
$('#bottone_giu').fadeIn('slow');
$(window).bind('scrollstart', function(){
$('#bottone_su,#bottone_giu').stop().animate({'opacity':'0.2'});
});
$(window).bind('scrollstop', function(){
$('#bottone_su,#bottone_giu').stop().animate({'opacity':'1'});
});
$('#bottone_giu').click(
function (e) {
$('html, body').animate({scrollTop: $elem.height()}, 800);
} );
$('#bottone_su').click(
function (e) {
$('html, body').animate({scrollTop: '0px'}, 800);
} );});
//]]>
</script>

Finalmente si salva il modello. Ecco la solita Demo