jQuery fade making page jump

问题:

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.

回答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.

回答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;
}

回答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.

回答4:

I think that using fadeTo is much cleaner solution than assigning height via CSS. That way you don't have to worry about the height of the content you are swapping in or out.

An example with a fade out of some content and a fade in of data passed into the function (e.g. as result of an ajax call):

Note that you have to use fadeTo to fade the content back in (as opposed to just fadeIn) in order to return the opacity to something visible.

function swapData(data)
{
  sel = '#tab_container';
  $(sel).fadeTo(50, 0.10, function() { $(sel).html(data).fadeTo(300, 1) } );
}

回答5:

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.