Sticky "back to top" button showing on page load, before scrolling down

Question

I followed a tutorial to get a sticky "back to top" button that would appear once you scroll down. For some reason it's displaying when you're at the top of the page after the page first loads. If you scroll down, then all the way back up, it disappears (as it should). But initially it isn't behaving properly. Any idea?

Here's the live page I'm using it on, you can see it in the bottom right corner here: 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>

This will initially hide your button until you scroll.

Answer 2

It's displaying because you haven't fired a scroll event yet to make that logic get run 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 page load, to make sure the button is faded out. An alternative solution would be to set display: none; in the CSS on the element, so it's hidden by default, then only shown by the javascript later

Answer 3

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