Titolo criptico, ma ve lo spiego subito. In una pagina web, il top è, come dice il termine stesso il bordo superiore, mentre il footer è la sua parte inferiore. Siccome può essere utile passare dall'uno all'altro, tempo fa decisi di renderlo possibile. Come? Mediante link interni, cioè link che consentono di spostarci all'interno dello stesso documento ipertestuale.

Senza dilungarci troppo, perché stiamo parlando di questo? Perché, come avrete notato, ho fatto un restyling dei link interni che consentono di saltare direttamente al footer e di tornare in alto. Vediamo come si fa ad ottenere il mio stesso risultato.

HTML


 

Footer

▼
 



 
 
Dunque, creiamo due div, contenenti le scritte "Footer" e "Top" e con i due simboli Unicode ▼ e ▲. I div poi, li incapsuliamo dentro il tag a, in modo da usare come collegamento tutto il div, più facile da cliccare rispetto a del semplice testo. Per creare un link interno, basta indicare, nell'attributo href l'id della destinazione: in un caso sarà "footer" (href="#footer"), nell'altro sara "#" (href="#", cioè vuoto, il browser tornerà in alto).

Due note:
  1. Dobbiamo assicurarci che nel nostro sito/blog il footer abbia l'attributo id="footer", altrimenti la cosa non funge.
  2. Blogger, in fase di pubblicazione del post, interpreta i due id inserendo un riferimento assoluto, per questo il codice differisce leggermente da quello che ho scritto.

CSS

Per impostare posizione e aspetto ci affidiamo al css:
div.anchor_mt { margin: auto; width:70px; height:35px; 

text-align:center;
padding:1px 3px 1px 3px;
background:#444444;

-moz-transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;

position:fixed;
display:block;
line-height:1.3;
z-index:90;
}

a.anchor_mt { color:white; text-decoration:none; font-weight:bold;}
a.anchor_mt:hover { color:#CCE8EE; }

div#top_mt { margin-top:0;  top:-18px; left:50%; 

margin-left:-35px;

border-bottom-left-radius:5px; border-bottom-right-radius:5px;
box-shadow:0px 2px 6px #999999;
}

div#top_mt:hover { top:0px;}


div#footer_mt { margin-bottom:0; bottom:-18px; left:50%; 

margin-left:-35px;

border-top-left-radius:5px; border-top-right-radius:5px;
box-shadow:0px -2px 6px #999;
}

div#footer_mt:hover { bottom:0px;}
Tralasciando le piccolezze estetiche, vediamo giusto come definire il comportamento che ho scelto.

div della classe anchor_mt, cioè i div che costituiscono i nostri link interni:
  • stanno in posizione fixed, cioè fissa, vale a dire tengono la loro posizione indipendentemente da tutto;
  • hanno una dimensione fissa (width:70px; height:35px;) e asseconderanno gli eventi su di essi usando delle transizioni (righe dalla 7 alla 10).
  • vengono sempre visualizzati davanti al contenuto della pagina (z-index:90);

    div con id top_mt, cioè il div che sta nel bordo superiore della pagina:
    • sta 18 pixel fuori dalla pagina (top:-18px;), tenendo a vista soltanto il simbolo ▼; 
    • è centrato (left:50%; margin-left:-35px;), i px di margine sinistro devono essere la metà della lunghezza (nel mio caso pari a 70px);
    • sull'evento hover, cioè quando la freccina del mouse ci passa sopra, fa coincidere il suo bordo superiore con quello della pagina (top:0px;), abbassandosi  e mostrando la scritta "Footer", che spiega a che serve quell'affare su cui l'utente ha sovrapposto il pointer del mouse.
      
    div con id footer_mt, cioè il div che sta nel bordo superiore della pagina:
    • analogo al precedente ma invertendo il comportamento.

    Questo è grosso modo tutto, spero di essere riuscito a spiegarmi, ma in caso contrario, nei commenti potete chiedere tutti i chiarimenti del caso :)