In questo articolo vi mostreremo come gestire la navigazione con le ancore tra i link interni e le loro destinazioni all’interno della stessa pagina, ottenendo un piacevole effetto a scorrimento.

Naturalmente i contenuti della pagina saranno accessibili e perfettamente visualizzabili anche con Javascript disabilitato. Buona la resa cross-browser: sono supportati tutti i browser moderni, da Internet Explorer 6 in su.

Quello che ci serve è un tag “a” che contiene il testo e aggiungiamo un evento utilizzando jQuery.

  • Primo, creiamo i vari link:
Sezione 1
Sezione 2
Sezione 3
Sezione 4
  • Poi, all’interno della stessa pagina, creiamo i vari div con il relativo contenuto:
Contenuto sezione 1
Contenuto sezione 2
Contenuto sezione 3
Contenuto sezione 4
  • Per ultimo va aggiunto il codice Javascript dell’animazione:

ATTENZIONE: ricordiamo di controllare che nel nostro “head” ci sia il richiamo a jQuery, per esempio:


Fonte originale: www.html.it

Per vedere la pagina di esempio clicca qui