jqueryjoomlafadeinpage-jump

How can i prevent function .fadein() in jQuery from sending user to top of the page?

I have a menu where i basically click and hide current p and fadein the corresponding button text. Thing is, it makes my page literally jump to the top.

Here is the html for menu:

<li class="sub"><a href="#" class="sub_ha1"> 
   › Instalação/Configuração de Componentes</a>
</li>

Here is the html for corresponding text

:

<div id="sub_ha1" class="text" style="display:block;">
  <img src="../images/serv/ha1.jpg" alt="">
  <h1> Instalação/Configuração de Componentes - 35€ </h1>

  <p>Chamamos de hardware a todos os componentes ..... </p>
</div>

Here is the jQuery:

$("#navigation a.sub_ha1").click(function () {
$(".text").hide();
$("#sub_ha1").fadeIn();
return false;
});

What i want, is a way to prevent it because it just makes it annoying after getting through a few menus.

Thanks

EDIT: http://jsfiddle.net/M2AE6/ if you click about or contact menus after clicking 1st or 2nd menu item you'll see what is happening.

Solution

  • As tcovo said in a comment to the main question what if you use function() { $(".text").not($("#sub_ha1").fadeIn()).hide(); return false; } so that #sub_ha1 gets shown (initially with opacity 0) before the other .text are hidden? – tcovo , this actually worked out pretty great except for when total text height was smaller than menu. Thanks all.