滚动后的 jQuery fadeOut 使屏幕跳转

Question

在我正在构建的网站上，我有一个全屏 .intro DIV，当您单击 .down 时，页面会滚动到主要内容和 。 intro div 淡出。

除 .intro 淡出后页面跳下意味着用户必须向上滚动之外，所有工作都按预期进行。不理想。

我不知道问题出在哪里。看我的JSFiddle一个工作的例子。我使用了渐变背景，因此您可以看到页面在 .intro 到 fadeOut 所需的 (1500) 之后跳下来。

我正在使用的 jQuery:

(function($) {
jQuery(document).ready(function($) {
    $(".scroll").click(function(event){ 
        event.preventDefault(); 
        $('html,body').animate({scrollTop:$(this.hash).offset().top}, 1000); 
    });
});
})(jQuery);

$(".down").click(function() { 
$(".intro").fadeOut(1500);
});

Answer 1

fadeOut()让元素淡出，然后设置display属性为none，让元素脱离文档流，这就是页面跳转的原因.

您可以使用 fadeTo() 或设置不透明度动画以将元素保持在原位并避免跳跃，但即使元素不可见，该元素仍会占用空间。

$(".down").click(function() { 
    $(".intro").fadeTo(0);
});

或者您可以使用 fadeOut() 方法的回调来重置 scrollTop，使其看起来像页面没有移动一样，但这可能会导致某些浏览器出现一些闪烁:

$(".intro").fadeOut(1500, function() {
    $(window).scrollTop(0)
});