Menu di navigazione con Scroll della finestra in jquery

Scrolliamo la pagina elegantemente Voglio spiegarti come realizzare un menu che gestisca lo scroll della pagina per visualizzare la sezione […]
Menu di navigazione con Scroll della finestra in jquery

Scrolliamo la pagina elegantemente

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.

Provalo subito

Prova la demo Consulta il codice
  • luana

    ciao! grazie per il tutorial, è stato molto utile 🙂
    lo sto usando per il mio sito personale, però deve esserci un qualche errore che ho fatto tale per cui morire se la ul mi si centra rispetto al layout… 🙁

    • Ciao Luana!!! grazie a te… il problema della centratura di una lista puo essere tranquillamente risolto dando una width al tag “ul” e impostando i margini sinistro e destro su auto… però per una risposta più accurata potresti fornirmi il link del tuo sito, oppure postare la porzione di codice che interessa la lista e il suo contenitore. Restiamo a disposizione!!

  • daniele

    CIAOOO ASCOLTA IL MENU CHE C’è IN QUESTO SITO è FATTO NELLA STESSA MANIERA DEL TUO TUTORIAL??
    CIAOOO
    GRAZIE MILLE.!!
    😀

    http://www.egoitzosa.com/2011/

    • Ciao Daniele!! Praticamente anche nel sito che mi hai linkato viene utilizzato jQuery come framework.

      Nel caso specifico di questo articolo non faccio uso di alcun plugin per effettuare lo spostamento, in quanto mi avvalgo dei metodi che offre il pacchetto base di jquery, mentre il sito in questione dovrebbe avvalersi di questo plugin.

      http://demos.flesler.com/jquery/scrollTo/

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github