title: Making an image visible/invisible depending on the scroll position
body: <p>So, i have a little arrow in my page: </p>
  
  <pre><code>&lt;a href="#" class="scrollToTop"&gt;&lt;img src="images/arrow_up.png"&gt;&lt;/a&gt;
  </code></pre>
  
  <p>I wanna make it invisible when the page is at the top and then, as the user scrolls down, to make it visible so the user can click to go back to the top of the page.
   This Javascript doesn't seem to be working:</p>
  
  <pre><code>    $(document).ready(function(){
  
      //Check to see if the window is top if not then display button
      $(window).scroll(function(){
          if ($(this).scrollTop() &gt; 100) {
              $('.scrollToTop').fadeIn();
          } else {
              $('.scrollToTop').fadeOut();
          }
      });
  
      //Click event to scroll to top
      $('.scrollToTop').click(function(){
          $('html, body').animate({scrollTop : 0},800);
          return false;
      });
  
  });
  </code></pre>
  
  <p>I also have this css (which is working):</p>
  
  <pre><code>.scrollToTop{
      padding: 1em;
      color: #444;
      position: fixed;
      right: 0;
      bottom: 0;
      -webkit-transition: -webkit-transform .3s ease-in-out;
      -ms-transition: -ms-transform .3s ease-in-out;
      transition: transform .3s ease-in-out;
      z-index: 1;
  }
  
  .scrollToTop:hover{
      -webkit-transform:rotate(360deg);
      -moz-transform:rotate(360deg);
      -o-transform:rotate(360deg);
  }
  </code></pre>
  
  <p>I'd apreciate some help! :)</p>