Pubblicato il 28/09/16 - aggiornato il  | 6 commenti :

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

bottone-tornare-inizio-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://lh4.googleusercontent.com/-zW7dqJUpI20/T4aITXBclbI/AAAAAAAAXgc/ADDzldXolRw/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

go-to-top-icon-1   go-to-top-icon-2   go-to-top-icon-3   go-to-top-icon-4    go-top-icon-5    go-top-icon-6






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.





6 commenti :

  1. Buonasera signor amministratore del blog, è possibile mettere il codice del pulsante "torna sù" nel body invece che in un gadget html nel layout? Ho messo un tuo addobbo natalizio e il pulsante torna su ma quest'ultimo non mi funziona più perché un tuo addobbo di natale nel mio blog, sovrasta o disturba la funzionalità di questo pulsante di ritnorno all'header. Come posso fare? Grazie in anticipo per la sua risposta

    RispondiElimina
    Risposte
    1. Ah,mi scusi una cosa, se mi chiamo amministratore, è perché ho il nome di amministratore del mio blog, magari chi legge potrebbe fraintendere con questo blog. Mi scuso anticipatamente per l'equivoco se dovesse sorgere, cordiali saluti.

      Elimina
    2. Prova questa soluzione
      https://www.ideepercomputeredinternet.com/2016/09/blogger-bottoni-navigazione.html
      con il codice che va inserito nel Tema del blog e non in un elemento pagina HTML
      @#

      Elimina
    3. Salve, ho provato. Non mi piace molto lo stile anche se l'ho personalizzato e funziona. Grazie comunque Signor Ernesto.

      Elimina
  2. Buongiorno, ho facilmente inserito il bottone torna su creato con un mia immagine grazie ai suoi tutorial, mi chiedevo, è possibile far trasformare questa immagine al passaggio del mouse, prima del click?, grazie in anticipo, silvia

    RispondiElimina
    Risposte
    1. In teoria sì ma con questo codice bisognerebbe mettere mano al javascript
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy