Migliorare i link interni alla pagina

Dice Jakob Nielsen che i link interni alla pagina (quelli del tipo <a href="#link"< per intenderci) andrebbero evitati. Violano alcune regole basilari della navigazione sul web e soprattutto confondono l'utente che, per esempio, cliccando su un link si aspetta di andare su un'altra pagina, e che magari crede di esserci arrivato dal momento che nello spostamento ad un'altra sezione della pagina non ha notato lo scorrimento della stessa o altri segnali di feedback visuale.

Nulla da eccepire. L'usabilità  dei link interni può però essere migliorata senza dover necessariamente arrivare alla soluzione radicale di Nielsen. Una soluzione è quella proposta in questo articolo apparso su Dev Opera. Si basa su una nuova pseudoclasse (:target) introdotta nei CSS3 e supportata al momento da Safari, Firefox e Opera 9.5. Consente di definire l'aspetto visivo di un elemento che sia il target di un link con un identificatore di frammento (sono gli URL che terminano con #id_elemento).

Ecco l'esempio di base allegato all'articolo. Facile apprezzarne l'idea di fondo. Il codice è poi molto semplice da interpretare.

L'autore dell'articolo (Bruce Lawson) ha poi combinato la soluzione basata su :target con Smoothscroll, un vecchio script creato da Stuart Langridge. Ecco il risultato.