Défilement de page indésirable lors de la modification du contenu de l'élément fixe

Question

J'ai donc créé une sorte de menu, apposée en bas de l'écran via la position fixe CSS, et cela fonctionne correctement. Le seul problème est que lorsque la page défile quelque peu, et que le menu est activé (glisser vers le haut animé avec jQuery), la page saute à nouveau vers le haut. C'est assez irritant. Voici un code pertinent:

//handle click on stats tab 
$('a.stats').click(function(e) { 
    if ($('#menuWrapper').hasClass("stats")) { 
     $('#menuWrapper').removeClass("stats") 
     .removeClass("open") 
     .animate({ bottom: '-100px'}, 300); 
    } else if (!$('#menuWrapper').hasClass("open")) { 
     $('#sponsors').hide(); 
     $('#feedback').hide(); 
     $('#stats').show(); 
     $('#menuWrapper').animate({ bottom: '0px'}, 300) 
     .addClass("stats") 
     .addClass("open"); 
    } else { 
     $('#menuWrapper').addClass("stats"); 
     $('#sponsors').fadeOut(); 
     $('#feedback').fadeOut(); 
     $('#stats').fadeIn(); 
    } 
    $('#menuWrapper').removeClass("sponsors") 
    .removeClass("feedback"); 
}); 

(. C'est un exemple de la façon dont je change le contenu que j'ai des fonctions similaires qui modifient le contenu ou réduisent au minimum le menu en fonction de son état actuel.)

<div id="menuWrapper"> 

    <div id="menuTop"> 
     <a href="#" class="sponsors">Sponsors</a> | <a href="#" class="feedback">Feedback</a> | <a href="#" class="stats">Stats</a> 
    </div> 

    <div id="menuContent"> 
     <div id="sponsors"></div> 
     <div id="feedback"></div> 
     <div id="stats"></div> 
    </div> 

</div> 

(et c'est à quoi ressemble le HTML, avant que le contenu ne soit chargé dynamiquement dans les divs sponsors, feedback et stats.)

Pour voir un exemple de fonctionnalité géniale si nécessaire, voir http://www.crowdsplat.com/alpha. Si vous avez un aperçu de ce qui peut causer cela et/ou comment je peux le réparer, je l'apprécierais grandement. Merci pour votre temps.

Answer 1

Essayez return false de votre fonction de clic ou utilisez event.preventDefault() pour éviter le navigateur en essayant de suivre le lien que je suppose est à l'origine le saut vers le haut si vous avez un signet non valide par exemple href = « # »

par exemple

$('a.stats').click(function(e) { 
    e.preventDefault(); 
    if ($('#menuWrapper').hasClass("stats")) { 
     $('#menuWrapper').removeClass("stats") 
     .removeClass("open") 
     .animate({ bottom: '-100px'}, 300); 
    } else if (!$('#menuWrapper').hasClass("open")) { 
     $('#sponsors').hide(); 
     $('#feedback').hide(); 
     $('#stats').show(); 
     $('#menuWrapper').animate({ bottom: '0px'}, 300) 
     .addClass("stats") 
     .addClass("open"); 
    } else { 
     $('#menuWrapper').addClass("stats"); 
     $('#sponsors').fadeOut(); 
     $('#feedback').fadeOut(); 
     $('#stats').fadeIn(); 
    } 
    $('#menuWrapper').removeClass("sponsors") 
    .removeClass("feedback"); 
});