Anchor link keeps jumping, no matter what I do

Question

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!

Notice it is not really jumping anywhere. You are altering the height of the page, so it's natural for it to reposition the viewport if the page is made smaller — Alexander, Jul 21 '12 at 17:56
Alexander, thanks for your fast answer. Well, I understand that I'm changing the height of the page. If I use a min-height that's at least the height of the bigger content, the problem is kinda solved (I already checked that), but there must be a way to avoid this jump, doesn't it? It could even jump to the top of the submenu, but not much above it, as it's doing =\ — rafaelbiten, Jul 21 '12 at 18:00
Instead of `fadeOut()` and `fadeIn()` have you tried just using `show()` and `hide()`? — Jason Towne, Jul 21 '12 at 18:02
Jason, great! That solves the jumping problem! Strange thing is that my animation is gone. Anyway I can use show() and hide() and still keep the animation? Anyway, that's already a good answer to my problem! =] — rafaelbiten, Jul 21 '12 at 18:12

score 1 · Accepted Answer · answered Jul 21 '12 at 18:38

1

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.

answered Jul 21 '12 at 18:38

Jason Towne

8,014
5
54
69

Yep, when animation happens, the jump is triggered again =( But hey, it's working! Thanks Jason ;) – rafaelbiten Jul 21 '12 at 18:43
@7th, I'm glad it's working for you and thanks for marking this as the accepted answer. Would it be too much trouble to ask for an upvote as well? :) – Jason Towne Jul 24 '12 at 18:04

score 1 · Answer 2 · answered Sep 09 '13 at 13:09

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;

    }
});

Anchor link keeps jumping, no matter what I do

2 Answers2