javascript - 在像素高度滚动时淡出

Question

我正在尝试实现一个“滚动到顶部”按钮，该按钮在页面上的某个点淡入并在某个点淡出...我的 fadeIn 功能正常工作但似乎无法获得正确的效果单击事件淡出的语法；一旦你到达顶部它就会消失，而不是如果你 <= 675px 就消失。非常感谢任何帮助!

HTML:

</div>
<a href="#top" class="scrollToTop">BACK TO LOGIN</a>
</div>

jQuery:

$(document).ready(function() {

    //Check to see if the window is top if not then display button
    $(window).scroll(function() {
        if ($(this).scrollTop() > 675) {
            $('.scrollToTop').fadeIn(500);
        } else {        
            $('.scrollToTop').fadeOut(500);
        }

    });

    //Click event to scroll to top  
    $('.scrollToTop').click(function() {
        $('html, body').animate({
            scrollTop : 0
        }, 800);
        return false;
    });

});

Answer 1

我认为您的问题不是很清楚，但也许您的意思是当单击 scrollToTop 按钮时它不会消失，直到滚动到达页面顶部，这是因为当您的动画功能正在运行 .滚动 不能运行得如此之快以至于当达到 675px 时按钮会消失，但是您可以使用以下代码在单击它后立即淡出按钮:

jQuery: $(document).ready(function() {
    var isClicked = false;
    $('.scrollToTop').css("display","none");
    $(window).scroll(function() {
        if (isClicked == false){
            if ($(this).scrollTop() > 675) {
                $('.scrollToTop').fadeIn(500);
            } else {
                $('.scrollToTop').fadeOut(500);
            }
        }
    });

    $('.scrollToTop').click(function() {
        isClicked = true;
        $('.scrollToTop').fadeOut(500);
        $('html, body').animate({
            scrollTop : 0
        }, 800, function(){
            isClicked = false;
        });
    });
});

添加了 isClicked 变量以防止按钮闪烁(您可以删除它以弄清楚我在说什么)。 我还添加了这一行:

$('.scrollToTop').css("display","none");

因为当页面第一次加载并且您位于页面顶部时，您似乎不需要“滚动到顶部”按钮。

Check JSFiddle Demo