当窗口滚动到顶部时，如何隐藏 div？

Question

I have an up arrow that fades in when my page is scrolled down. How can I make it so that it fades out when the user scrolls back to the top of the page?

This is what I have so far. The arrow will disappear for a brief second then fade back in which I don't want - it should stay hidden.

 function footerFadeIn() { $(window).scroll(function() { $('footer').fadeIn('slow'); }); } function footerFadeOut() { $('footer').fadeOut('slow'); $('footer').hide(); } $(window).scroll(function() { if ($(window).scrollTop() == 0) { footerFadeOut(); } else if ($(window).scrollTop() > 0) { footerFadeIn(); } });

 footer { position: fixed; bottom: 0; right: 0; padding: 20px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <footer> <i class="fas fa-chevron-up" style="font-size: 35px;"></i> </footer>

My thought process here is to have two functions - footerFadeIn() and footerFadeOut() . Then I have an if statement that checks if the window is scrolled away from scrollTop() of zero and executes the respective function.

EDIT: My question differs from the suggested one in that I simply had two event handlers that were causing the issue.

Answer 1

The issue is because you have added a scroll event handler inside footerFadeIn() . As such you end up creating another new scroll event handler when a scroll event happens. To fix this, just remove the scroll handler in that function and leave the main one which is called when the DOM loads.

Also note that you need to call hide() in the callback of fadeOut() . This is why the fadeout animation doesn't happen correctly. Try this:

 function footerFadeIn() { $('footer').fadeIn('slow'); } function footerFadeOut() { $('footer').fadeOut('slow', function() { $(this).hide(); }); } $(window).scroll(function() { if ($(window).scrollTop() == 0) { footerFadeOut(); } else if ($(window).scrollTop() > 0) { footerFadeIn(); } });

 html, body { height: 2000px; } footer { position: fixed; bottom: 0; right: 0; padding: 20px; display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" /> <footer> <i class="fas fa-chevron-up" style="font-size: 35px;"></i> </footer>