Attached back to top button showing page loading, before scrolling down

Question

I followed the tutorial to get the sticky back button that will appear when you scroll down. For some reason, it appears when you are at the top of the page after the first page load. If you scroll down, then completely back, it will disappear (as it should be). But initially he does not behave properly. Any idea?

Here is the live page on which I use it, you can see in the lower right corner: http://willryan.us

HTML

<a href="#" class="go-top" style="display: inline;">Back to top</a> <script> $(document).ready(function() { // Show or hide the sticky footer button $(window).scroll(function() { if ($(this).scrollTop() > 200) { $('.go-top').fadeIn(500); } else { $('.go-top').fadeOut(300); } }); // Animate the scroll to top $('.go-top').click(function(event) { event.preventDefault(); $('html, body').animate({scrollTop: 0}, 300); }) }); </script> 

CSS

 .go-top { position: fixed; bottom: 0.75em; right: 0.5em; text-decoration: none; color: white; background-color: rgba(0, 0, 0, 0.25); font-size: 12px; padding: 10px; display: none; margin: 0; } .go-top:hover { background-color: rgba(0, 0, 0, 0.6); color: white; text-decoration: none; } 

Answer 1

Change your HTML from

 <a href="#" class="go-top" style="display: inline;">Back to top</a> 

to

 <a href="#" class="go-top" style="display: none;">Back to top</a> 

First, it will hide your button until you scroll it.

Answer 2

Displayed because you haven’t fired a scroll event yet to make this logic fire to hide / show it

 <script> $(document).ready(function() { function checkPosition() { if ($(this).scrollTop() > 200) { $('.go-top').fadeIn(500); } else { $('.go-top').fadeOut(300); } } // Show or hide the sticky footer button $(window).scroll(checkPosition); // Animate the scroll to top $('.go-top').click(function(event) { event.preventDefault(); $('html, body').animate({scrollTop: 0}, 300); }) checkPosition(); }); </script> 

This new refactor will fire checkPosition at least once on the download page to make sure the button has disappeared. An alternative solution would be to set display: none; in CSS on the element, so it is hidden by default, and then only javascript is shown later

Answer 3

I did this as an ntgCleaner user and changed the "display: inline" in html to "display: none" and it seems to work. Thanks!