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

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIkNHUTPIZu0YLLLCINy3-SgMKedULyX-MJupZO-3ypGYE_Y098Y28OI2eUAxhKFTtWBfLS7FKP4KKzauFO4SiMUOyeMoPMWEaIK2oWPBjHqtnoxcuGG91-IVjzzRyQVLGuJCR285eMoM/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.