Installare in Blogger un bottone per tornare a inizio pagina.

Come mostrare con jQuery, a destra o a sinistra del layout, un bottone per tornare a inizio pagina in Blogger dopo che si sia effettuato uno scroll verso il basso di un valore personalizzabile.

Nelle pagine web più lunghe gli webmaster sono soliti mostrare a fondo pagina un bottone per tornare rapidamente all'inizio. Talvolta ci sono anche pulsanti per andare anche a fondo pagina magari accoppiati. Questa funzionalità è disponibile pure per la piattaforma Blogger con la possibilità di scegliere anche lo stile dei bottoni da visualizzare a scelta sulla sinistra o sulla destra del layout.

Per uno spostamento meno repentino dal basso all'alto della pagina occorre usare la libreria jQuery. Con questo javascript si mostrerà il bottone solo dopo che ci sia stato un consistente e personalizzabile scroll della pagina verso il basso. L'immagine del pulsante potrà essere scelta dal lettore. A tale scopo si può consultare il post sulle risorse per trovare icone gratis nel web.

Dopo l'installazione, se si scorre una pagina verso il basso, si visualizzerà una icona in cui cliccare per tornare rapidamente ma non repentinamente nella parte alta della pagina

L'installazione non presenta difficoltà visto che non occorre neppure modificare il modello. Si va su Layout -> Aggiungi un gadget -> Base -> HTML/Javascript e si incolla questo codice

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'> </script>
<script type="text/javascript" >
var scrolltotop={   
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
    controlHTML: '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM3lXwGO8CuFiHs0SZjhZdfAzffXZ7OzicYnoKAmoDncFcjadAQeg2fvj4gZFd28OvrjXGKBd8bdljYlF_viCIiRY7TB9RRbpy7O9-Fb-EBRjeMvVYApMCZ8uTfpKWAmsEWzkvshgh/s48/gotop5.png" />',
    controlattrs: {offsetx:15, offsety:15},
    anchorkeyword: '#top',
    state: {isvisible:false, shouldvisible:false},
    scrollup:function(){
        if (!this.cssfixedsupport)
            this.$control.css({opacity:0})
        var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
        if (typeof dest=="string" && jQuery('#'+dest).length==1)
            dest=jQuery('#'+dest).offset().top
        else
            dest=0
        this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
    },
    keepfixed:function(){
        var $window=jQuery(window)
        var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
        var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
        this.$control.css({left:controlx+'px', top:controly+'px'})
    },
    togglecontrol:function(){
        var scrolltop=jQuery(window).scrollTop()
        if (!this.cssfixedsupport)
            this.keepfixed()
        this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
        if (this.state.shouldvisible && !this.state.isvisible){
            this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
            this.state.isvisible=true
        }
        else if (this.state.shouldvisible==false && this.state.isvisible){
            this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
            this.state.isvisible=false
        }
    },  
    init:function(){
        jQuery(document).ready(function($){
            var mainobj=scrolltotop
            var iebrws=document.all
            mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest
            mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
            mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
                .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
                .attr({title:'Scroll Back to Top'})
                .click(function(){mainobj.scrollup(); return false})
                .appendTo('body')
            if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='')
                mainobj.$control.css({width:mainobj.$control.width()})
            mainobj.togglecontrol()
            $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
                mainobj.scrollup()
                return false
            })
            $(window).bind('scroll resize', function(e){
                mainobj.togglecontrol()
            })
        })
    }
}
scrolltotop.init()
</script>

Si salva e si posiziona a piacere l'elemento pagina. Si possono scegliere altri pulsanti sostituendo l'URL proposto colorato di viola per esempio con quello di uno dei bottoni seguenti

                

Per trovare l'indirizzo di una delle icone basta cliccarci sopra. Si aprirà un'altra scheda del browser. L'indirizzo di tale pagina copiato dal browser potrà essere sostituito all'URL colorato di viola. Lo script evidenziato di giallo è  jQuery e può essere tralasciato se già presente nel modello.

 

PERSONALIZZAZIONI DEL BOTTONE

Le immagini proposte sono tutte di dimensione 48x48 pixel. Consideriamo adesso queste righe

setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlattrs: {offsetx:15, offsety:15}
anchorkeyword: '#top'

Quando si clicca sul pulsante la pagina scorre fino a inizio pagina. Si può però per esempio configurare scrollto: 100, per far terminare lo scroll a 100 pixel dal top del post. Invece in scrollduration:1000 si può settare la durata in millisecondi dello scroll verso l'alto. 

startline:100, indica la dimensione in pixel dello scroll in basso dopo il quale si vedrà l'icona per tornare a inizio pagina. Aumentando tale valore la icona si visualizzerà dopo uno scroll maggiore.

offsetx:15, offsety:15 rappresentano  invece la distanza del pulsante dal lato e dal basso.

Si può anche modificare l'espressione title:'Scroll Back to Top' che sarà quella visualizzata nel tooltip quando si punterà l'icona con il mouse.

La stringa anchorkeyword: '#top' serve per poter opzionalmente inserire dei link testuali o anche di immagini con una sintassi come questa

<a href="#top">Vai a inizio post</a>
<a href="#top"> <img src="URL_IMMAGINE"/> </a>

Si potranno cioè creare dei link aggiuntivi o dei bottoni aggiuntivi per andare a inizio pagina. Infine sostituendo right con left potremo visualizzare il pulsante sulla sinistra invece che a destra.

Demo
Clicca qui