jqueryhtmlanchorpage-jump

Anchor link keeps jumping, no matter what I do


Ok, this is driving me crazy!

I'm working with a "tab like" submenu to show 3 different tables. Each link inside this submenu hides the current content and show another one.

NOTE: for now I'll leave a direct link to the page I'm working on so you may check the problem by yourself.

To avoid the <a> (anchor) jumps, I'm already trying <a onclick="return false;"> (which works fine in another site I have). In my jQuery code I'm also using "e.preventDefault();" that helps avoiding the jump to the top of the page, but even using it the page always jumps to some part of the page above the sublinks.

I really don't know what else I could do to avoid this jumps.

For now this is what I have inside my html:

<nav id="submenu" class="menu">
<ul>
    <li class="current-menu-item"><a onclick="return false;" href="#" rel="statics">Sites Estáticos</a></li>
    <li><a onclick="return false;" href="#" rel="dynamics">Sites Dinâmicos</a></li>
    <li><a onclick="return false;" href="#" rel="extras">Serviços Extras</a></li>
</ul>

And this is my jQuery:

function subSections(){
$('nav.menu li a').click(function(e){
    e.preventDefault(); //this helps, but don't solve the problem
    var active = $(this).parent();
    var currSection = $(this).attr('rel');
    if(active.hasClass('current-menu-item')!=true){
        // Add and remove 'current-menu-item' class
        $('nav.menu .current-menu-item').removeClass('current-menu-item');
        active.addClass('current-menu-item');
        // Hide currentSection and Show the clicked one
        $('.showing').fadeOut('slow', function(){
            $('#'+currSection).fadeIn('slow').addClass('showing');
        }).removeClass('showing');
    }
});

}

Also, maybe there's a better way to do this "show and hide" stuff, but this seems to work fine. Well, I'll be glad if anyone can shed a light on this problem and help me! Thanks in advance!


Solution

  • Use .show() and .hide() instead of .fadeIn() and .fadeOut().

    If you want to keep the animation, you can try .show('slow') and .hide('slow') but that may trigger the jumping problem also.