title: JQuery Animated scroll Fade In/ Fade Out issue
body: <p>Found this code online, but the only thing I have left to do is modify the Jquery to where it fades out when you stop scrolling, and fades back in when you start scrolling. </p>
  
  <p>Also, I want my button at the very bottom right side of the screen. Here's the code. Any help will be appreciated.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;a href="index.html" class="scrollToTop"&gt;&lt;/a&gt;
  </code></pre>
  
  <p>JQuery:</p>
  
  <pre><code>&lt;script&gt;
  $(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;
      });
  
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.scrollToTop{
      width:100px; 
      height:130px;
      padding:5px; 
      text-align:center; 
      background: whiteSmoke;
      font-weight: bold;
      color: #444;
      text-decoration: none;
      position:fixed;
      bottom:5px;
      right:5px;
      display:none;
      background: url('images/UpArrow_tab.png') no-repeat 0px 0px;
  }
  
      .scrollToTop:hover{
      text-decoration:none;
      background: url('images/UpArrow_tab_hover.png') no-repeat 0px 0px;
  }
  </code></pre>