Come mostrare dei bottoni per spostarsi in alto e in basso di una pagina di Blogger.

Come installare dei bottoni per spostarsi in alto e in basso della pagina di Blogger.

Nei siti che siano soliti pubblicare articoli piuttosto lunghi non è raro visualizzare sulla destra o sulla sinistra due bottoni per facilitare lo spostamento in basso e in alto della pagina. Tale spostamento può essere repentino oppure molto più morbido. La prima soluzione sfrutta un semplice javascript e può essere installata nel sito seguendo le istruzioni del post su come inserire bottoni per spostarsi verticalmente nella pagina.

Per avere uno spostamento meno violento si deve invece utilizzare una libreria javascript come potrebbe essere quella jQuery. Tale libreria può essere già installata nel vostro template oppure dovrà essere fatto sul momento. Come icone ho usato due immagini floreali molto adatte a blog femminili che possono però essere sostituite da altre immagini in tema con il contenuto del sito oppure scegliere semplicemente delle icone a forma di freccia.

Dopo aver salvato il template si va su Modello > Modifica HTML e si cerca la riga </head>. Subito sopra a questa si incolla il seguente codice

<!-- 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>

dove le immagini con URL colorato di rosso hanno dimensione 120x125 pixel e sono state posizionate rispettivamente al 30% di distanza dalla parte alta e dalla parte bassa. Gli altri parametri hanno accanto dei commenti esemplificativi del loro significato. È stata introdotta anche una opacità al 90% quando si passa con il mouse sopra alle immagini.

Ora si cerca la riga </body> e, subito sopra, si incolla questo nuovo 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. Con questa impostazione le due immagini si visualizzeranno sulla sinistra. Se preferite mostrarle sulla destra basterà sostituire le due righe
 
left:10px; /* Distanza dalla sinistra */

con

right:10px; /* Distanza dalla destra */

I due numeri 800 servono per la velocità di spostamento. Se nel vostro modello fosse già presente jQuery magari con una versione diversa da quella proposta in questo codice è meglio cancellare le due righe evidenziate di giallo. Si può testare il funzionamento direttamente da questa Demo

Demo
Clicca qui