Back to Top!

Lo script che presentiamo (tratto dal sito MaxxBlade.com) consente di implementare una funzionalità molto utile nel caso di pagine ricche […]

Lo script che presentiamo (tratto dal sito MaxxBlade.com) consente di implementare una funzionalità molto utile nel caso di pagine ricche di contenuto e perciò lunghe. Crea infatti, automaticamente, un piccolo box con un link che al click riporta il lettore in cima alla pagina. La particolarità è che il box compare solo quando scrollando la pagina si attiva la barra di scorrimento e che accompagna lo scrolling rimanendo sempre in basso. Più difficile da spiegare a parole che da provare: visualizzando il file di esempio allegato, si comprenderà subito il funzionamento.

Lo script è costituito da una sezione Javascript da incorporare direttamente nel corpo della pagina.

  • esempio.htm

## 1: LA SEZIONE JAVASCRIPT

Il codice Javascript va inserito in un punto qualsiasi del corpo della pagina (quindi, all’interno della sezione <body>/body>). Per non confonderlo con il resto del codice HTML, il posto migliore è comunque la fine del documento, immediatamente prima del tag di chiusura </body> (come abbiamo fatto nell’esempio).

Vediamolo:

var b2tx=80,b2ty=50,b2th='<nobr>Torna su</nobr>’;
function b2x(){return ((moz)?window.innerWidth-20:document.body.clientWidth)-b2tx;}
function b2y(){return
((moz)?window.innerHeight:document.body.clientHeight)+b2o()-b2ty;}
function b2o(){return (moz)?window.pageYOffset:document.body.scrollTop;}
function b2t(){with(document.getElementById(‘bttl’).style){left=((b2o()<1)?-500:b2x())+’px’;top=((b2o()<1)?-500:b2y())+’px’;}setTimeout(‘b2t()’,99);}
var moz=(document.getElementById&&!document.all)?1:0;document.write(‘<div id=”bttl” class=”bak2top” style=”position:absolute”><a
style=”cursor:’+((moz)?’pointer’:’hand’)+'” onclick=”JavaScript:scrollTo(0,0)”>’+b2th+'</a></div>’);b2t();

Tutto può essere lasciato intatto, tranne la prima riga. Essa contiene 3 variabili che consentono di stabilire la posizione (in pixel) del piccolo box rispetto all’angolo inferiore destro della finestra e il testo da mostrare. br> Con la variabile ‘b2tx’ impostiamo la posizione orizzontale. Con ‘b2ty’ quella verticale. Con ‘b2th’ il testo.

A livello di codice HTML non ci sono osservazioni particolari da fare, se non una considerazione di ‘stilè. Se si osserva l’esempio, si noterà che il box presenta uno sfondo azzurro chiaro con il testo e il bordo blue. Bene, lo stile può essere modificato intervenendo sul codice CSS presente all’interno della sezione <head></head> del documento, che va riportata nella pagina in cui vorrete implementare lo script:

<style>
BODY {
font-family: Verdana, Arial;
font-size: 12px;
}
.bak2top {
font-family: Arial;
font-size: 10px;
font-weight: bold;
color: #0000FF;
background-color: #CCCCFF;
border: 1px solid;
border-color: #0000FF;
padding: 2px;
}
</style>

In particolare, andrà mantenuta la regola per la classe .bak2top, personalizzando i valori delle singole proprietà.