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

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.

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