Come mostrare un pulsante per tornare a inizio pagina.

Come installare un pulsante per tornare a inizio pagina con possibilità di configurare il punto di arrivo, l'immagine visualizzata, il livello dello scroll in cui iniziare a vedere il pulsante, la durata dello spostamento.

In un articolo precedente abbiamo visto come inserire due icone per spostarsi in alto e in basso della pagina web che si sta visitando. Se due icone sempre visibili paiono troppo invasive si può optare per una soltanto per tornare a inizio pagina che si inizia a vedere solo quando si è fatto già un certo scroll della pagina.

Lo script che andrò a presentare utilizza la libreria jQuery e l'ho preso da Dynamic Drive. Lo spostamento non è repentino e si può configurare anche il punto della pagina in cui riportare il lettore che clicca sopra alla icona. Inoltre ho preparato anche tutta una serie di icone adatte ai diversi layout. Per la installazione mi riferirò a un blog su Blogger ma lo script è funzionante in qualsiasi pagina web in cui si possa editare l'HTML.

Si va su Layout > Aggiungi un gadget > Base > HTML/Javascript e, in Sezioni del sito e senza digitare il titolo, si incolla il codice seguente

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" >
/***********************************************
* Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Modified by www.ideepercomputeredinternet.com
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com for full source code
***********************************************/
var scrolltotop={
    //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
    //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
    controlHTML: '<img src="https://lh4.googleusercontent.com/-zW7dqJUpI20/T4aITXBclbI/AAAAAAAAXgc/ADDzldXolRw/s48/gotop5.png" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
    controlattrs: {offsetx:15, offsety:15}, //offset of control relative to right/ bottom of window corner
    anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
    state: {isvisible:false, shouldvisible:false},
    scrollup:function(){
        if (!this.cssfixedsupport) //if control is positioned using JavaScript
            this.$control.css({opacity:0}) //hide control immediately after clicking it
        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. Il pulsante prescelto ha l'URL colorato di rosso e può essere sostituito da un altro semplicemente modificandone l'indirizzo

                  

Per utilizzare una di queste icone basta cliccarci sopra con il destro del cursore e scegliere Copia URL Immagine per poi sostituirlo nel codice. Si possono configurare anche i seguenti parametri

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

1) Come impostazione di default quando si clicca sul pulsante la pagina ritornerà all'inizio ma si può decidere di farla risalire fino a 60 pixel dal top della pagina con scrollto: 60,

2) startline:100 indica il livello dello scroll da dove si inizierà a visualizzare l'icona

3) offsetx:15, offsety:15 rappresentano  invece la distanza del pulsante dalla parte destra e dal basso del layout della pagina 

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

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

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

che funzioneranno nello stesso modo del pulsante e che rimanderanno il lettore all'inizio della pagina o al punto che abbiamo configurato mediante scrollto.

6) La riga evidenziata di giallo installa la libreria jQuery e può essere tralasciata qualora fosse già presente nel nostro template. 

7) scrollduration:1000, fadeduration:[500, 100] impostano in millisecondi rispettivamente da durata dello spostamento e la durata della dissolvenza.

Ho postato una demo di questa funzionalità:

Demo
Clicca qui