JavaScript  »  Articoli  »  Effetti e controlli Javascript 

In questo articolo affronteremo la creazione di una pagina web di presentazione, l'ideale per una home page personale o un piccolo portfolio, e implementeremo con poche righe di codice un semplice script per la gestione della navigazione con le ancore tra i link interni e le loro destinazioni, ottenendo un piacevole effetto 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.

I tre esempi allegati all'articolo presentano lo stesso markup HTML; differiscono solo per il framework Javascript impiegato, che ho selezionato tra quelli di maggiore utilizzo: Prototype, JQuery e MooTools. La scelta della libreria da utilizzare è poi delegata alle preferenze e convinzioni di ognuno.

Avremmo potuto ottenere il medesimo effetto anche senza includere un framework; esistono molti script “stand alone” che fanno la stessa cosa (da leggere a tal proposito un precedente articolo di Cesare Lamanna).

Prima di cominciare vediamo subito l'esempio.

Il markup HTML

La nostra pagina ha una struttura molto semplice: header e footer con larghezza al 100% della finestra, mentre i contenuti sono in un div della larghezza voluta centrato nella pagina. Le varie sezioni del sito sono racchiuse in altrettanti div, ognuno con un id, su cui punteranno i link interni (ancore #) del menu di navigazione, contenuto nell'header.

Per rendere l'interfaccia più usabile, attraverso i CSS ho assegnato una posizione fissa all'header, che così rimane ancorato in alto sulla finestra del browser durante lo scorrimento della pagina. Questo comporta che il navigatore potrà avere sempre sott'occhio il menu per spostarsi tra le varie sezioni.

Purtroppo Internet Explorer 6 non supporta la regola CSS utilizzata, position:fixed. Semplicemente su questo browser durante lo scrolling l'header non rimarrà fermo ma si muoverà con il resto del documento. Per migliorare l'usabilità ho inserito alla fine di ogni sezione di contenuti un collegamento per tornare all'inizio della pagina.

Il codice di Prototype

Nell'esempio ho utilizzato un file Javascript compresso contenente le ultime release di Prototype e Scriptaculous, includendo solo 'effect' tra le varie tipologie di effetti disponibili. Il resto del codice, cioè lo script che utilizzeremo, è incluso direttamente nel tag script della pagina, ma solo per velocizzarne la lettura e la modifica in fase di test. L'autore del codice è Tobie Langel, uno dei core members di Prototype, (qui l'articolo originale nel suo blog). Ecco il codice:

  <script type="text/javascript">
	// Copyright (c) 2007 Tobie Langel (http://tobielangel.com)
	// Use as you please - just don't make it the new black!
	// Full tutorial available here: http://tobielangel.com/2007/3/11/a-fistful-of-dollars
	// Based on an idea by Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
	document.observe ('dom:loaded', function() {
	//Event.observe(window, 'load', function() {
	$$('a[href^=#]:not([href=#])').each(function(element) {
    	element.observe('click', function(event) {
      		new Effect.ScrollTo(this.hash.substr(1));
      		Event.stop(event);
    	}.bindAsEventListener(element))
 	})
		})
	</script>
	

Per prima cosa lo script trova tutti link in cui l'attributo href contiene come primo carattere il simbolo # che fanno riferimento ognuno alla relativa sezione di contenuti. Attraverso la funzione $$(css selector...) otteniamo un array di tutti questi elementi corrispondenti al selettore applicato: a[href^=#]:not([href=#]. Grazie a Prototype (ma la stessa cosa vale per MooTools e JQuery) abbiamo la piena compatibilità cross-browser di quasi tutti i selettori CSS3. Da notare in questo caso specifico che selezioniamo tutti i tag <a> che cominciano per “#” ma che non (not) sono uguali a “#”, questo per evitare un errore Javascript nel caso di click su eventuali link “vuoti”, spesso utilizzati in modo un po' invasivo in alcuni script.

Altri articoli

Altre guide

Altre newsletter