Come inserire un pulsante per tornare a inizio pagina.

Inserire in Blogger una icona per tornare a inizio post con effetto slide ottenuto tramite JQuery.

Ho già presentato un metodo per spostarsi all'interno dei post di Blogger mediante l'introduzione di due icone che portano il lettore rispettivamente all'inizio e alla fine dell'articolo e di eventuali commenti presenti nel post.

Lo spostamento provocato da tali pulsanti è repentino visto che non sono state usate librerie javascript per introdurre degli effetti slide che rendano il processo decisamente più valido esteticamente. Vado quindi a proporre un nuovo metodo basato su un solo bottone che appaia solo quando si scrolla la pagina verso il basso e che ci permetta di tornare nella parte alta con un click. Viene usato JQuery che è il non plus ultra dei javascript per questo tipo di personalizzazioni.

L'installazione non presenta difficoltà visto che basterà andare su Layout > Aggiungi un gadget > HTML/Javascript e incollare in Sezioni del sito il seguente codice

• Codice pulsante per inizio pagina -

Si può naturalmente scegliere il pulsante da visualizzare in basso a destra. Ne riporto una serie che ho trovato su IconFinder. Per ottenerne l'URL basta cliccarci sopra quindi usare il destro del mouse per aprire il menù contestuale e scegliere Copia URL immagine

                  

L'URL dovrà essere sostituito nel codice a quello di default colorato di rosso nella riga che inizia con
controlHTML: '<img src=" … Si possono scegliere anche altre icone. L'importante è che siano in formato PNG e abbiano dimensioni 48x48 pixel. Ci sono anche altri parametri che possono essere modificati

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

Per default quando si clicca sul pulsante la pagina scorre fino all'inizio. Si può però per esempio configurare scrollto: 50, per far terminare lo scroll a 50 pixel dal top del post.

startline:100, indica la dimensione in pixel dello scroll in cui si vedrà l'icona per tornare a inizio pagina.

offsetx:15, offsety:15 rappresentano  invece la distanza del pulsante dalla parte destra 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 questa semplice sintassi

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

che funzioneranno nello stesso modo del pulsante. In questo caso però non ci sarà l'effetto slide. Nel caso in cui nel vostro modello fosse già presente JQuery, tralasciate la prima riga del codice colorata di viola.  Ho anche postato in rete una

• Demo del bottone per tornare a inizio pagina -

Fonte | Dynamic Drive -