滚动后jQuery fadeOut使屏幕跳转

问题描述

在我建立的网站上，我有一个全屏 .intro DIV，点击 .down 页面滚动到主内容并且 .intro div淡出。

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

我找不出问题所在。查看我的以获取工作示例。我已经使用了渐变背景，所以你可以看到页面在（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的）; 
 $ b $（。down）。click（function（）{
 $（。intro）。fadeOut（1500）; 
}）; 
  

解决方案

fadeOut code>将元素淡出，然后将display属性设置为 none ，将元素从文档流中取出，这就是页面跳转的原因。 / p>



您可以使用 fadeTo（）或为不透明度设置动画以保持元素到位并避免跳跃，但元素仍然会占用空间，即使它不可见。

  $（。down）。click（function（）{ 
 $（。intro）。fadeTo（0）; 
}）; 
  

或者您可以使用 fadeOut（）方法重置scrollTop使其显示为页面没有移动，但这可能会导致一些浏览器中的闪烁：



  $（window）.scrollTop（0）
}）; 
  




On a site I'm building I have a fullscreen .intro DIV, when you click .down the page scrolls to the main content and the .intro div fades out.

All works as expected apart from after .intro fades out the page jumps down meaning the user has to scroll back up. Not ideal.

I can't figure out what the problem is. See my JSFiddle for a working example. I've used a gradient background so you can see the page jumping down after the (1500) it takes for .intro to fadeOut.

jQuery I am using:

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

解决方案

fadeOut() fades out the element, and then sets the display property to none, taking the element out of the document flow, and that's why the page is jumping.

You can use either fadeTo() or animate the opacity to keep the element in place and avoid the jumping, but the element would still take up space even it's not visible.

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

or you can use the callback of the fadeOut() method to reset the scrollTop making it appear as the page didn't move, but this could cause some flashing in some browsers:

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

这篇关于滚动后jQuery fadeOut使屏幕跳转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！