jQuery fade making page jump

Question

Hi. 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

Another useful tip, more so when there is a <noscript> url for a link, you can return false when your script has finished executing return false;. This stops the default action of the link from being executed, i.e. going to the href. For browsers without JS, the user would redirect to the url as normal.

Answer 2

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 3

Instead of returning false, do e.preventDefault() (why can be found here: http://css-tricks.com/return-false-and-prevent-default/):

$("ul.tabs li").click(function(e) {
    e.preventDefault()
    $("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(); });

});

But the problem has nothing to do with the return false, because the link isn't followed. The problem is you hide the current tab content , and then fade in the new one. This results in changing height of your body so the scrollbar is getting shorter because the old content is hidden making you pop to the top. You could try to get the current height of the div, the height of the content that will be loaded and alter the height of the div dynamically.