title: Sticky "back to top" button showing on page load, before scrolling down
body: <p>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?</p>
  
  <p>Here's the live page I'm using it on, you can see it in the bottom right corner here: <a href="http://willryan.us">http://willryan.us</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;a href="#" class="go-top" style="display: inline;"&gt;Back to top&lt;/a&gt;
  
  
  &lt;script&gt;
          $(document).ready(function() {
              // Show or hide the sticky footer button
              $(window).scroll(function() {
                  if ($(this).scrollTop() &gt; 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);
              })
          });
      &lt;/script&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.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;
  }
  </code></pre>