在像素高度的滚动上淡出

fadeOut on scroll at pixel height

本文关键字：淡出 滚动 像素 高度      更新时间：2023-09-26

我试图实现一个滚动到顶部按钮，在页面上的某一点淡入，并在某一点淡出…我有fadeIn功能工作正常，但似乎无法获得正确的语法为点击事件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;
    });
});

我认为你的问题不是很清楚，但也许你的意思是，当点击scrollToTop按钮时，它不会消失，直到滚动到达页面顶部，这是因为当你的动画功能运行时，.scroll不能运行得那么快，当达到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");

，因为它似乎不需要一个"滚动到顶部"按钮，当页面第一次加载，你在页面的顶部。

检查JSFiddle Demo

相关文章：