Pubblicato il 28/09/16 - aggiornato il  | 8 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.



8 commenti :

  1. 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
    @#

    RispondiElimina
  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
  3. Salve, anni fa avevo inserito nel mio blog il bottone e funzionava perfettamente (grazie mille). In questi giorni però ho cambiato modello di blogger e ho inserito nuovamente il bottone seguendo le istruzioni. Ora il bottone è visibile, ma purtroppo non funziona. Cosa si può fare?

    RispondiElimina
  4. Al messaggio precedente aggiungo che ho fatto varie prove. Inserendo il codice così com'è il bottone 5 c'è, ma non funziona. inserendo il codice con l'url al bottone 6 non si visualizza nulla. Ho inserito allora il codice con la stringa riferita al bottone 6 ricavata da Inspect element (con il tasto dex), di nuovo si vede il bottone ma non funziona come nel primo caso.

    RispondiElimina
    Risposte
    1. Hai scelto un modello Responsive? In questo caso purtroppo i codici non sono più validi e non si possono neppure adattare perché ciascuno dei 5 modelli responsive hanno codici diversi uno dall'altro. Stesso discorso se hai scaricato il modello da internet
      @#

      Elimina
    2. Grazie per la rapida risposta ;)
      il modello di blogger che ho caricato è il "Soho" e visto che il bottone non funziona suppongo sia uno dei 5 modelli responsive che dici. Che peccato.
      Cercherò
      Grazie mille

      Elimina
    3. Sì, è uno dei modelli Responsive che si vedono nello stesso modo da desktop e mobile
      @#

      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