jQuery fade making page jump

Question

For some reason jQuery's fadeIn is making my page jump to the top. Each different div it fades in makes the scroll bar go a different size so I think this might be why 'return false' isn't working. Here is the code:

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

//When page loads...
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content

//On Click Event
$("ul.tabs li").click(function() {

    $("ul.tabs li").removeClass("active"); //Remove any "active" class
    $(this).addClass("active"); //Add "active" class to selected tab
    $(".tab_content").hide();
    var activeTab = $(this).find("a").attr("href");
    $(activeTab).fadeIn('slow', function() {
  $(this).show(); });
return false
});
});

I would appreciate if anyone could help out. Here is the site :

www.matthewruddy.com/demo

It's the tabbed links above the main content. Each one fades in the top five posts from that category.

Thanks in advance. Matthew.

Answer 1

The issue isn't anything with links, though I understand that's the first thought, it's the transition itself.

For a split second (one frame, 13ms to be exact, between the hide and the first frame of the fade in) there is no content in the area the tab panels go, so the page scrolls up because the document was shorter.

To avoid this you need to prevent the document getting any smaller, luckily for your particular page that's pretty easy. Just change this:

<div class="tab_container">

To this:

<div class="tab_container" style="height: 516px;">

Or give it external CSS:

.tabs_container { height: 516px; }

This will prevent the .tab_content divs being gone for that one frame from resizing the page.

Answer 2

You can't use fadeTo instead of fadeIn. For example:

//Hide all content
$(".tab_content").hide();
//Activate first tab
$(".TabsScheda li:first").addClass("active").show();
//Show first tab content
$(".tab_content:first").show(); 

//On Click Event
$(".TabsScheda li").click(function() {
    //Remove any "active" class
    $(".TabsScheda li").removeClass("active");
    //Add "active" class to selected tab
    $(this).addClass("active");
    //Hide all tab content
    $(".tab_content").fadeTo("slow", 0);
    //Find the href attribute value to identify the active tab + content
    var activeTab = $(this).find("a").attr("href");
    //Fade in the active ID content
    $(activeTab).fadeTo("slow", 1);
    return false;
}