Question

我已经制作了这个小片段，将窗口滚动到页面顶部。

    $(window).scroll(function(){
        $("#scrollup").fadeIn("slow");
    }); 
    $("#scrollup").click(function(){
        $('html, body').animate({ scrollTop: 0 }, 'normal', function() {
            $("#scrollup").fadeOut("slow");
        });
    });

但是，当窗口滚动后，当scrollup div淡出时，它会逐渐消失。如何阻止这种情况发生？谢谢。

我认为我找到了一个合理的解决方案

$(window).scroll(function(){
    if ($(this).scrollTop() > 100) {
        $('.scrollup').fadeIn();
    } else {
        $('.scrollup').fadeOut();
    }
});

这比更改原始代码容易吗？

Answer 1

当您处于顶部或已经淡入（可见）时，您应该确保不会淡入scrollup div

$(window).scroll(function(){
    if ( $(window).scrollTop() !== 0 or $("#scrollup").is(":hidden") ) then {
         $("#scrollup").fadeIn("slow");
    }
});

Answer 2

你可以添加一个if语句来检查它是否位于顶部：

$(window).scroll(function(){
    if($("body").scrollTop()!=0)
        $("#scrollup").fadeIn("slow");
    }); 
    $("#scrollup").click(function(){
        $('html, body').animate({ scrollTop: 0 }, 'normal', function() {
            $("#scrollup").fadeOut("slow");
        });
    });

Answer 3

结帐.stop()：http://api.jquery.com/stop/

$(window).scroll(function(){
    if ($(this).scrollTop() > 100) {
        $('.scrollup').stop().fadeIn();
    } else {
        $('.scrollup').stop().fadeOut();
    }
});

JQuery停止元素从淡入淡出

3 个答案: