title: jQuery fading "back to top" link. Page load link visibility
body: <p>I am attempting to implement a "back to top" link that fades in on my page once a user has scrolled down the page a certain amount.</p>
  
  <p>I have noticed that on some of my pages, the "back to top" link will flash on the page before hiding itself, but not on others. In an attempt to track down the cause of the "link flash" I have created a JS fiddle for you to view my coding, and hopefully find what is causing the inconsistency. The JS fiddle itself seems to be working properly, but that might just be because it is in a fiddle. Would there maybe be a line of code I could add to ensure the link is hidden on load?</p>
  
  <p>Thanks for taking the time to look at this. It is greatly appreciated.</p>
  
  <p><a href="http://jsfiddle.net/uLUWV/" rel="nofollow">http://jsfiddle.net/uLUWV/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="container"&gt;
  Test Content
  &lt;/div&gt;    
  &lt;p id="back-top"&gt;&lt;a href="#top"&gt;&lt;span&gt;Go To Top&lt;/span&gt;&lt;/a&gt;&lt;/p&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#back-top {position: fixed; display:none; bottom:10px; left:10px; width:83px;}
  #back-top a {width: 83px; display: block;}
  #back-top span {width: 83px; height: 94px; display: block; background-color:red;}
  
  .container {height:4000px;}
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>$(document).ready(function(){
  
      // hide #back-top first
      $("#back-top").hide();
  
      // fade in #back-top
      $(function () {
          $(window).scroll(function () {
              if ($(this).scrollTop() &gt; 500) {
                  $('#back-top').fadeIn();
              } else {
                  $('#back-top').fadeOut();
              }
          });
  
          // scroll body to 0px on click
          $('#back-top a').click(function () {
              $('body,html').animate({
                  scrollTop: 0
              }, 800);
              return false;
          });
      });
  
  });
  </code></pre>