Question

我试图实现滚动到顶部按钮，该按钮在页面上的某个点淡入并在某一点淡出...我的fadeIn功能正常工作但看起来不太好获取click事件fadeOut的正确语法;一旦你到达顶部，它就会消失，而不是在你重新<= 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按钮时它不会消失，直到滚动到达页面顶部，这是因为当你的动画函数运行时{{1} }无法运行得如此之快以至于当达到675px时消失按钮但是你可以在使用此代码点击它时立即淡出按钮：

.scroll

添加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

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

<强> Check JSFiddle Demo

fadeOut在像素高度滚动

1 个答案: