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