javascript - JQuery阻止元素淡入

Question

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

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

但是，当窗口滚动后向上滚动 div 淡出时，它又淡入。如何阻止这种情况发生？谢谢。

---

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

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

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

Answer 1

您应该确保向上滚动 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();
    }
});