Having Trouble With Page Reload After jQuery Function

Question

I've been struggling with this for a while and I can't come up with a solution. I have a simple jQuery function which fades in and out content elements on a menu for a restaurant. The fad works perfectly but when it runs the page reloads and jumps back to the top. I've found all kinds of suggested solutions on here but none of them work. I've used return false; and e.preventDefault(); as well as messing around with the link HTML changing it to a span and a button but none of it is working. It's on a customized Theme on Wordpress here is the HTML I have.

<div id="menu_nav">

<ul>
<li><a href="#" id="mainattraction" class="current-link menu-link">Main Attractions</a></li>
    <li><a href="#" id="seafoodcombos" class="menu-link">Seafood Combo's</a></li>
<li><a href="#" id="harbouronaroll" class="menu-link">Harbour On A Roll</a></li>
<li><a href="#" id="meangreens" class="menu-link">Mean Greens</a></li>
<li><a href="#" id="appetizers" class="menu-link">Appetizers</a></li>
<li><a href="#" id="kidsmenu" class="menu-link">Kids Menu</a></li>
<li><a href="#" id="onthegrill" class="menu-link">On The Grill</a></li>
<li><a href="#" id="soups" class="menu-link">Soups</a></li>
</ul>

</div>

<div id="mainattractionscontent">
//content
</div>

<div id="seafoodcomboscontent">
//content
</div>

etc. etc.

and here is the jQuery I'm currently using.

 $('document').ready(function() {

    $('.menu-link').click(function(event) {
        var id = this.id + 'content';
        var link = this.id;
        $('.active').fadeOut(600, function(){
            $('#' + id).fadeIn(600);
            $('.active').removeClass('active');
            $('#' + id).addClass('active');
            $('.current-link').removeClass('current-link');
            $('#' + link).addClass('current-link');
            return false;
       }); 
    });

 });

you can also check out the page at http://theharboursportsbar.com/the-menu for reference. Thanks in advance for the help.

Answer 1

The return false; needs to be in the "click" handler, not the fade-out callback.

$('.menu-link').click(function(event) {
    var id = this.id + 'content';
    var link = this.id;
    $('.active').fadeOut(600, function(){
        $('#' + id).fadeIn(600);
        $('.active').removeClass('active');
        $('#' + id).addClass('active');
        $('.current-link').removeClass('current-link');
        $('#' + link).addClass('current-link');
   }); 
   return false;
});

Calling event.preventDefault(); would work too, but again it should happen in the "click" handler, not the animation callback.

Answer 2

It's not actually with the default nature of a link. Pointy is right in that you should move the return false outside the click handler, but that's not the actual issue here.

When you're fading out your content, the page becomes smaller, small enough that on most monitors/viewports whatever all the content can fit on one page, so it appears to be "jumping" to the top, when in reality, it's just showing all the available content possible. So basically your problem is in the nature of the fadeOut function itself, at the end of the fadeOut function it sets display:'none' affecting the layout of the page.

Try this instead:

$('.menu-link').click(function(event) {
    var id = this.id + 'content';
    var link = this.id;
    $('.active').animate({opacity:0},{duration:600, complete:function(){
        $('#' + id).css('display','block').animate({opacity:1},{duration:600});
        $('.active').removeClass('active').css('display','none');
        $('#' + id).addClass('active');
        $('.current-link').removeClass('current-link');
        $('#' + link).addClass('current-link');
    }}); 
    return false;
});