Probléme scroll et ancre [RÉSOLU]

Bonjour a tous,

Voila deux heures que je cherche sans trouver de solution a mon problème...

Voici mon HTML:

    <dd data-magellan-arrival="Presentation" name="presentation" id="actif"><a href="#Presentation" class="scroll">Présentation</a></dd>
    <dd data-magellan-arrival="Competences" name="competence" id=""><a href="#Competences" class="scroll">Mes compétences</a></dd>
    <dd data-magellan-arrival="Formation" name="formation" id=""><a href="#Formation" class="scroll"> Ma formation</a></dd>
    <dd data-magellan-arrival="Realisations" name="realisation" id=""><a href="#Realisations" class="scroll">Mes réalisations</a></dd>
    <dd data-magellan-arrival="Contact"name="contact" id=""><a href="#Contact" class="scroll">Me contacter</a></dd>

et mon js:

 
//code pour detecter navigateur
navigator.sayswho = (function(){
		var N= navigator.appName, ua= navigator.userAgent, tem;
		var M= ua.match(/(opera|chrome|safari|firefox|msie)\/?\s*(\.?\d+(\.\d+)*)/i);
		if(M && (tem= ua.match(/version\/([\.\d]+)/i))!= null) M[2]= tem[1];
		M= M? [M[1], M[2]]: [N, navigator.appVersion,'-?'];
		return M;
	})();
 
	var headerOffset = jQuery(".main-header").height(),
		blockMenu = jQuery(".block-menu"),
		nameNavigator = navigator.sayswho[0];
 
	if (nameNavigator == "Chrome") {
		var bodyelem = jQuery("body");
	}
 
	else if (nameNavigator == "Firefox") {
		var bodyelem = jQuery("body, html");
	}
 
	else if (nameNavigator == "Safari") {
		var bodyelem = jQuery(document);
	}
 
	else if (nameNavigator == "MSIE") {
		var bodyelem = jQuery(window);
	}
 
//fin code detecter navigateur
//debut code scroll
 
 var position = bodyelem.scrollTop();
    $(window).scroll(function() {
    var scroll = bodyelem.scrollTop();
 
    var actif = $('#actif').attr("name");
    if(scroll > position) {
         // scrolling downwards
         if(actif === 'presentation'){
             $('html, body').animate({scrollTop: $('#Competences').offset().top}, 1000);
             $('dd[name=presentation]').attr("id","");
             $('dd[name=competence]').attr("id","actif");
         }
         else if(actif === 'competence'){
             $('html, body').animate({scrollTop: $('#Formation').offset().top}, 1000);
             $('dd[name=competence]').attr("id","");
             $('dd[name=formation]').attr("id","actif");
         }
         else if(actif === 'formation'){
             $('html, body').animate({scrollTop: $('#Realisations').offset().top}, 1000);
             $('dd[name=formation]').attr("id","");
             $('dd[name=realisation]').attr("id","actif");
         }
         else if(actif === 'realisation'){
             $('html, body').animate({scrollTop: $('#Contact').offset().top}, 1000);
             $('dd[name=realisation]').attr("id","");
             $('dd[name=contact]').attr("id","actif");
         }
        }
    else if(scroll < position) {
         // scrolling upwards
         if(actif === 'competence'){
             $('html, body').animate({scrollTop: $('#Presentation').offset().top}, 1000);
             $('dd[name=presentation]').attr("id","actif");
             $('dd[name=competence]').attr("id","");
         }
         else if(actif === 'formation'){
             $('html, body').animate({scrollTop: $('#Competences').offset().top}, 1000);
             $('dd[name=competence]').attr("id","actif");
             $('dd[name=formation]').attr("id","");
         }
         else if(actif === 'realisation'){
             $('html, body').animate({scrollTop: $('#Formation').offset().top}, 1000);
             $('dd[name=formation]').attr("id","actif");
             $('dd[name=realisation]').attr("id","");
         }
         else if(actif === 'contact'){
             $('html, body').animate({scrollTop: $('#Realisations').offset().top}, 100);
             $('dd[name=realisation]').attr("id","actif");
             $('dd[name=contact]').attr("id","");
         }
 
    }
    position = scroll;
});

Voila mon problème:

j'essaye de faire un script permettant de naviguer sur le site juste avec le scroll, donc des qu'on "scroll down" on passe a l'ancre suivante et des qu'on "scroll up" on passe a l'ancre précédente.
bon ça fonctionne mal(je suis juste nul en js) donc en effet, le scroll ne s’arrête plus pas moyen de trouver d'ou viens le problème ni de trouver une solution.... vous pouvez voir ce que ca donne ici : www.capiaurelien.com

Je fais donc appel aux pros!
Merci d'avance pour votre aide!
Modifié par 6l20 (28 Apr 2014 - 15:09)