jQuery fade 使页面跳转

Question

出于某种原因，jQuery 的 fadeIn 使我的页面跳转到顶部。它淡入的每个不同的 div 都会使滚动条变得不同的大小，所以我认为这可能就是“return false”不起作用的原因。这是代码:

    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
});
});

如果有人能提供帮助，我将不胜感激。这是网站:

www.matthewruddy.com/demo

这是主要内容上方的选项卡式链接。每一篇文章都会淡出该类别的前五名帖子。

提前致谢。马修。

Answer 1

问题不在于链接，尽管我知道这是第一个想法，而是转换本身。

在一瞬间(一帧，准确地说是 13 毫秒，在隐藏和淡入的第一帧之间)，选项卡面板所在区域没有内容，因此页面向上滚动，因为文档较短。

为了避免这种情况，您需要防止文档变小，幸运的是，对于您的特定页面来说，这非常容易。只需更改此:

<div class="tab_container">

对此:

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

或者给它外部CSS:

.tabs_container { height: 516px; }

这将防止该一帧中的 .tab_content div 消失，从而调整页面大小。