Pubblicato il 12/04/12e aggiornato il

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

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

  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

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
Fonte | Dynamic Drive -




19 commenti :

  1. wei parsi. dopo aver usato il tuo sito come guida ho deciso di mettere il tuo antipixel sul mio blog. è il minimo. :) buona giornata!

    RispondiElimina
    Risposte
    1. @FrancescoSansone
      Grazie , lo apprezzo molto

      Elimina
  2. Ernesto quello che fai è meraviglioso ma....io sinceramente non ci capisco niente di html......
    Il pulsante è molto interessante però andando alla pagina del codice...mamma mia quanti codici e presumo che il primo sia quello per l'inserimento di aggiungi gadget mentre gli altri sono a modifica template....ove io la mano non la metto :o((
    Quindi se ho ben capito quello che devo copiare e....la prima riga della pagina del codice e se voglio prendere uno dei pulsanti a scelta devo modificare l'indirizzo http://ajax.googleapis.......

    è corretta la mia interpretazione...
    Aiutoooo e grazie e scusami.

    RispondiElimina
    Risposte
    1. @edvige
      No, è completamente sbagliata :)
      Devi semplicemente copiare il codice così com'è

      Elimina
    2. Il codice lo puoi modificare solo se ti senti in grado di farlo. Ho illustrato i parametri che si possono cambiare ma anche inserendo tutto pari pari il pulsante funziona.

      Elimina
    3. Sono riuscita uffiiii anche a cambiare in un altro colore ed ho riportato sul mio blog citandoti e con link diretti questa bellissima chicca senz'altro utile e così altri ti conosceranno. Se non ti va bene dimmelo che tolgo tutto.
      Ciaooo

      Elimina
    4. @edvige
      Ti ringrazio di aver citato me e questo post. Perché mai dovrebbe dispiacermi?

      Elimina
    5. sai mi è già capitato che mi venisse richiesto di togliere nonostante i link diretti con l'accusa di copiare. usualmente prima di pubblicare chiedo sempre m questa volta ho fatto viceversa :-((
      Ciaooo e grazie

      Elimina
  3. mi piace sta cosa , preso pulsante arancione , grazie :)

    RispondiElimina
  4. Inserito.! Meraviglia!
    Thanx! :-)

    RispondiElimina
  5. Ho inserito nel mio blog senza difficoltà ma....non potresti aggiungere due pulsanti come questi per scorrere nel blog in alto e in basso?
    Grazie!

    RispondiElimina
    Risposte
    1. @kamasa54
      Per ora i due pulsanti ci sono solo senza effetto JQuery
      http://www.ideepercomputeredinternet.com/2012/03/come-inserire-bottoni-per-spostarsi-dal.html

      Elimina
    2. @Ernesto Tirinnanzi

      Sono passata al link che mi hai indicato e ho trovato le icone troppo schematiche e ...piccole. Non potresti creare in due pulsanti come questi qui anche con l'effetto JQuery ? Se ci riesci, fammi un fischio!
      I miei complimenti e Buona Domenica!

      Elimina
  6. @ kamasa54
    Sono un dilettante e come grafico valgo zero :)

    RispondiElimina
  7. Ciao! Grazie mille per questo tutorial!

    Mi domandavo, è possibile aggiungere un codice per far apparire il pulsante "back to top" solo quando si è arrivati alla fine del blog? Cioè solo dal basso verso l'alto?

    RispondiElimina
  8. Ciao, ho utilizzato il tuo codice in una pagina fatta con op2 e funziona tutto perfettamente. Invece inserendolo in un'altra pagina sempre con op2 ma template diverso il pulsante non è cliccabile, sai per caso come posso risolvere il problema? Grazie in anticipo per la tua risposta. Grazie e complimenti.

    RispondiElimina
    Risposte
    1. Ti riferisci a Optimize Press? Non conosco quel CMS quindi non ti so dire nulla in merito. Per il bottone viene comunque utilizzato un javascript di Dynamic Dive che potrebbe non essere compatibile con un template in cui ci sia uno script concorrente
      @#
      @#

      Elimina
  9. Inserito! Grazie mille!Per cambio colore non riesco, ma va bene lo stesso, grazie per il tutorial.

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.