CODEWITHSUNDEEP
jqueryhtmlanchorpage-jump
rafaelbiten
rafaelbiten

Reputation: 6240

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!

Upvotes: 2

Views: 286

Answers (2)

Luke Watts
Luke Watts

Reputation: 467

Also, just to refactor the code a small bit and save a bit of typing (and make the script more dynamic) you don't need to write onclick="return false;"on every html link. Simply place return false at the end of the .click function in 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');

    // Return false for all links in the nav onclick
    return false;

    }
});

Upvotes: 1

Jason Towne
Jason Towne

Reputation: 8050

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.

Upvotes: 1

Related Questions