滚动后jQuery fadeOut使屏幕跳转

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

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

我无法弄清楚问题是什么。 有关工作示例，请参阅我的JSFiddle 。 我使用了渐变背景，因此您可以看到页面在。（1500）之后向下跳转.intro到fadeOut 。

我正在使用的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) });