Bottoni floreali per spostarsi a inizio e a fondo pagina.

Bottoni per spostarsi all'inizio e alla fine della pagina con effetto dissolvenza e opacità.

Vediamo come inserire dei bottoni nel layout del nostro blog su Blogger in modo da spostarsi velocemente all'inizio e alla fine della pagine. Ho inserito due bottoni realizzati con una immagine di un fiore che è piaciuta molto a una lettrice ma si possono usare anche delle immagini più asettiche.

 

Vi ricordo che ho dedicato a questo argomento anche un post che però illustrava come inserire il solo bottone per tornare all'inizio  e un altro articolo che aveva anche il pulsante per andare alla fine del post ma non aveva implementato alcun effetto.

 

In questo articolo saranno presentati due bottoni molto simili che permetteranno di spostarsi dal basso in alto e viceversa usando JQuery e un po' di effetto opacità.

 

 

Per l'installazione si va su Modello > Backup/Ripristino e si salva il modello completo per questioni di sicurezza. Si torna su Modello > Modifica HTML > Procedi e si cerca la riga </head>. Subito sopra si incolla il codice seguente

<!-- Bottoni Up & Down con JQuery -->
<style type='text/css'>
.nav_up{
background-color:white;
position:fixed;
background:transparent url(
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3b-b6t7SCZgUd_5Klkj_cnUEeEwRVsx-gSwBgWPUgcdVyEBQHVdBm1lX-pFZQzFOglu-eqJ_96TsiCKzy0ZzBSIbZhhmzKjpyDrpFThh2Yu6vIrmIuyhLyYuOHM4Al7Qw1CzUOGIFjurA/s125/fiori-inizio.png) no-repeat top left;
background-position:50% 50%;
width:120px; /* Larghezza immagine */
height:125px; /* Altezza Immagine */
top:30%; /* Distanza dal basso */
left:10px; /* Distanza dalla sinistra */
white-space:nowrap;
cursor: pointer;
opacity:0.9;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
}
.nav_down{
background-color:white;
position:fixed;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXAIw0gjmboYKQhg1zRt09gpPOw6aPgsIWRAyN2WltZFhoOFYEKzhLuoY81-uGTraf_XVqMWM6XmKIwI5Wqr0MXwVF0iZa9aH-CCpPOZsMpFsOiV2UyERqD5USfILXsWUAy66WdfSNvUQy/s125/fiori-fondo.png) no-repeat top left;
background-position:50% 50%;
width:120px; /* Larghezza immagine */
height:125px; /* Altezza immagine */
bottom:30%; /* Distanza dalla parte alta */
left:10px; /* Distanza dalla sinistra */
white-space:nowrap;
cursor: pointer;
opacity:0.9;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
}
</style>

 

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

 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/><div class='nav_up' id='nav_up' style='display:none;'/>
<div class='nav_down' id='nav_down' 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');
$('#nav_up').fadeIn('slow');
$('#nav_down').fadeIn('slow');
$(window).bind('scrollstart', function(){
$('#nav_up,#nav_down').stop().animate({'opacity':'0.2'});
});
$(window).bind('scrollstop', function(){
$('#nav_up,#nav_down').stop().animate({'opacity':'1'});
});
$('#nav_down').click(
function (e) {
$('html, body').animate({scrollTop: $elem.height()}, 800);
} );
$('#nav_up').click(
function (e) {
$('html, body').animate({scrollTop: '0px'}, 800);
} );});
//]]>
</script>

Si salva il modello. Accanto ai parametri evidenziati di rosso sono presenti i commenti che spiegano a cosa si riferiscono. Ricordo solo che le immagini possono essere sostituite da altre a nostra scelta e sarà nostra cura modificarne le dimensioni.

Con questa configurazione le due immagini che portano il visitatore rispettivamente all'inizio e alla fine della pagina sono state inserite sulla sinistra del layout. Se avete un modello in cui stanno meglio sulla destra è sufficiente sostituire left con right nelle due occorrenze. Si può anche mettere un bottone sulla destra e uno sulla sinistra a nostra discrezione.

La riga colorata di blu è la libreria JQuery. Nel caso in cui fosse già presente nel vostro modello si può fare a meno di incollarla. Le distanze delle immagini sono state calibrate al 30% dall'alto e dal basso. Si tratta di valori assolutamente arbitrari e possono essere modificati a piacere.
Fonte | Scrolling to the top and bottom with JQuery -