Menu di navigazione con Scroll della finestra in jquery

• Tweet

• Tweet

Voglio spiegarti come realizzare un menu che gestisca lo scroll della pagina per visualizzare la sezione corrispondente alla voce di menu cliccata. Per capire di cosa parlo, dai subito un occhiata la demo in fondo all’articolo. Ora che ti è più chiaro l’obiettivo, per prima cosa realizziamo l’html di base.

La parte html e css

Come al solito, ti fornisco un html basilare, giusto per sostenere il meccanismo. Sta a te poi rimodellarlo in base alle esigenze grafiche. Il tutto consiste in un semplice menu a 5 voci e altrettante macroaree in cui è diviso il sito web. Ogni anchor ha come valore dell’attributo href proprio il valore dell’id della macroarea di riferimento. Non abbiamo creato niente’altro che dei collegamenti interni tramite ancore di destinazione. Il CSS non è molto rilevante in questa fase. Nella demo ho giusto dato qualche larghezza altezza e colore per differenziare gli elementi e rendere piu chiaro il movimento associato alle varie voci di menu.

<ul id="mainmenu">
    <li><a href="#bio">Bio</a></li>
    <li><a href="#works">Works</a></li>
    <li><a href="#skills">Skills</a></li>
    <li><a href="#social">Social</a></li>
    <li><a href="#contact">Contact</a></li>
</ul>

<div id="bio"></div>
<div id="works"></div>
<div id="skills"></div>
<div id="social"></div>
<div id="contact"></div>

La parte Javascript

Nessun plugin esterno per realizzare il tutto, ma solo l’utilizzo di animate e scrolltop, entrambi nativi del core di jquery. Il meccaniscmo è semplice. All’evento click associato a tutte le ancore appartenenti all’id #mainmenu:

1. Salvo in una variabile “target” il valore dell’attributo href dell’ancora appena cliccata (this).
2. Valorizzo una variabile “destination” con il valore derivante dall’offset (coordinate) dell’elemento a cui è associato “target” (#bio,#social,#contact … etc)
3. Tramite il metodo animate, scrollo la pagina fino al valore numerico definito dalla variabile destination

$(document).ready(function(){
	$('#mainmenu a').click(function(){
		target = $(this).attr("href");
		destination = $(target).offset().top;

		$("html,body").animate({ scrollTop: destination }),3000;
		return false;
	});
});

Conclusioni

Poche righe di codice per ottenere un effetto carino e funzionale. Il sistema è stato testato con tutte le versioni di Internet Explorer dalla 6 alla 9, nonchè con tutti i browser moderni. Spero che ti sia piaciuto e che avrai modo di riutilizzarlo nei tuoi progetti. Per qualsiasi dubbio utilizza pure i commenti qui di seguito, nel limite delle nostre conoscenze siamo sempre pronti a darti una mano per approfondire i concetti.