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

滚动后jQuery fadeOut使屏幕跳转

1 个答案: