Pubblicato il 08/05/13e aggiornato il

Pulsanti per andare a inizio o a fondo pagina e per farla scorrere a velocità prestabilita.

Inserire nei blog su Blogger delle icone per spostarsi a inizio o a fondo pagina, di una pagina in su o di una pagina in giù o ancora di effettuare un auto scroll automatico a velocità prestabilita.
In moltissimi siti sono presenti dei bottoni per aiutare il navigatore nello spostarsi all'interno della pagina. La soluzione più semplice è quella di mettere un pulsante per tornare a inizio pagina e un altro per spostarsi alla fine della stessa. Questi spostamenti possono essere resi più eleganti e meno repentini attraverso la libreria JQuery. L'esempio più semplice è proprio quello del pulsante per tornare al top del post che utilizza un semplice link per funzionare. Un metodo più sofisticato è quello di utilizzare due icone per andare a inizio e a fondo pagina che usano anche JQuery.

La soluzione più completa che avevo proposto fino a questo momento consisteva di due bottoni affiancati per spostarsi al top o a fondo pagina usufruendo di ben sei stili differenti di icone. Questo articolo vuole mostrare come installare un tool di 6 pulsanti sempre visibili in posizione fissa in basso a destra della pagina che consentano le seguenti azioni: al Top della Pagina, Pagina Su, Pagina Giù, Fondo Pagina, Auto Scroll e Stop Auto Scroll. Lascio ai lettori più acculturati in materia se sia più giusto scrivere Su senza accento o con l'accento e mi occuperò degli ultimi due pulsanti

icone-navigazione-blogger

Se si clicca su Auto Scroll la pagina inizierà a scorrere in basso automaticamente a una velocità che consenta la lettura senza effettuare nessuno scroll della pagina. L'icona è quella Play della riproduzione mentre lo Stop all'Auto Scroll viene effettuato con l'ultima icona che solitamente indica la pausa



L'installazione di queste icone è particolarmente semplice e come vedremo potremo personalizzare il loro colore e la velocità dello Scroll automatico. Dopo aver salvato il template si va su Modifica > HTML e si clicca sull'area del codice. Si digita Ctrl+F e nel campo Search si incolla la riga </body> quindi si clicca su Invio. La riga cercata verrà evidenziata. Subito sopra dovremo incollare il codice seguente

<style type="text/css">
#IpCeI-scroll{position:fixed;z-index:9999;bottom:0;right:0;}
#IpCeI-scroll a{display:block;float:left;background-color:#ee735b;background-image:url(http://lh5.ggpht.com/-wREw7V6WEsg/UYQq0-d5cWI/AAAAAAAABsI/vnH-wGlJp6s/s216/scroll.png);width:36px;height:36px;text-indent:-999em;}
#IpCeI-scroll a.IpCeI-up{background-position:0 -36px;}
#IpCeI-scroll a.IpCeI-down{background-position:0 -72px;}
#IpCeI-scroll a.IpCeI-bottom{background-position:0 -108px;}
#IpCeI-scroll a.IpCeI-scroll{background-position:0 -144px;}
#IpCeI-scroll a.IpCeI-stop{background-position:0 -180px;}
#IpCeI-scroll a:hover{background-color:#e83e1d;}
</style>
<script>
function autoScroll(){window.scrollBy(0,1);scrolldelay=setTimeout('autoScroll()',60)}
function stopScroll(){clearTimeout(scrolldelay)}
</script> 
<div id='IpCeI-scroll'>
<a class='IpCeI-top' href='javascript:window.scrollTo(0,0);' rel='nofollow' title='Inizio'>Inizio</a>
<a class='IpCeI-up' href='javascript:window.scrollBy(0,-window.innerHeight);' rel='nofollow' title='Pagina Su'>Pagina Su</a>
<a class='IpCeI-down' href='javascript:window.scrollBy(0,window.innerHeight);' rel='nofollow' title='Pagina Giù'>Pagina Giù</a>
<a class='IpCeI-bottom' href='javascript:window.scrollTo(0,999999);' rel='nofollow' title='Fondo Pagina'>Fondo Pagina</a>
<a class='IpCeI-scroll' href='javascript:autoScroll();' rel='nofollow' title='Auto Scroll'>Auto Scroll</a>
<a class='IpCeI-stop' href='javascript:stopScroll();' rel='nofollow' title='Stop Scroll'>Stop Scroll</a>
</div>

Si salva il modello. Il colore di sfondo delle icone può essere modificato cambiando i codici dei colori di sfondo. Il primo codice esadecimale si riferisce al colore in condizioni normali mentre il secondo quando l'icona è puntata con il mouse. Per calibrare la velocità di scorrimento bisogna invece agire sul valore 60 colorato di rosso. A numeri più grandi corrisponde una velocità di scorrimento più bassa mentre a numeri più piccoli una velocità di scorrimento superiore. Concludo ricordando che le espressioni colorate di viola sono puramente indicative e che possono essere modificate secondo i propri gusti.




7 commenti :

  1. Wow! Sai che stavo cercando proprio una cosa del genere?

    Ah... "su" non vuole l'accento. È corretto come l'hai scritto. ;)

    RispondiElimina
    Risposte
    1. @# Lo sapevo :)). L'accento va solo quando su è avverbio e anche in quel caso è pleonastico :D

      Elimina
  2. Ho notato una cosa strana nello scroll infinito: quando si passa alla seconda pagina, non si vede più la data sopra il post.

    RispondiElimina
  3. come faccio per sposarlo sulla sinistra?

    RispondiElimina
  4. Ciao Ernesto ho bisogno di un bottocino su e giu per il blog di blogger e volevo sapere se il codice che hai fatto è sempre valido perchè mi dicono che alcune cose sono cambiate e con codici html diciamo vecchi rallentano il blog.
    Grazie e buona giornata.

    RispondiElimina
    Risposte
    1. Questo codice funziona ancora benissimo e non avendo bisogno di javascript esterni non rallenta minimamente il sito
      @#

      Elimina

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.