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

Question

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.

Does it jump as soon as the link is clicked, or after the fadeIn is finished? — Dondi Michael Stroma, Apr 13 '13 at 19:35
Both if possible (in a JSFiddle would be ideal), could be a pageflow issue — DaveB, Apr 13 '13 at 19:47
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, Apr 13 '13 at 19:53
set container heights to match tallest. Is jumping due to no scroll height when content doesn't overflow window height — charlietfl, Apr 13 '13 at 21:23
@tcovo So i replace my function with yours for each different menu item ? and change the $("#sub_ha1") for each ? — Bruno Charters, Apr 13 '13 at 22:08

score 1 · Answer 1 · answered Apr 13 '13 at 19:53

1

You can also change your links href.

<a href="javascript:void(0);">text</a>

answered Apr 13 '13 at 19:53

Jeffpowrs

4,430
4
30
49

score 0 · Answer 2 · answered Apr 13 '13 at 19:37

0

Although your code seems right, you can try this one:

$("#navigation a").click(function(e){
   e.preventDefault(); // <----stop it here
   $(".text").hide();
   $("#"+this.className).fadeIn(); // <--this will get you the specific div you want to fade In.
   // $("[id='"+this.className + "']").fadeIn();// <---another way to do it
});

answered Apr 13 '13 at 19:37

Jai

74,255
12
74
103

1

doesn't return false execute both e.preventDefault(); and e.stopPropagation ? – Bruno Charters Apr 13 '13 at 19:40
@BrunoCharters Yes it does. – Fabrício Matté Apr 13 '13 at 19:49

score 0 · Accepted Answer · answered Apr 13 '13 at 22:22

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.

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

3 Answers3