title: 'Back to top' on scroll top at footer
body: <p>Using some examples I've seen around I've got a <strong>back to the top button</strong> to appear and work when you scroll down a page, however is there a way of making the button stick to the bottom of the screen until you reach the footer where it will stick to the top of the footer?</p>
  
  <p>this is my code so far:</p>
  
  <pre><code>&lt;script type="text/javascript" defer="defer"&gt;
      $(window).scroll(function() {
          if ($(this).scrollTop()) {
              $("#toTop").fadeIn();
          } else {
              $("#toTop").fadeOut();
          }
      });
  
  
      $("#toTop").click(function() {
          $("html, body").animate({scrollTop: 0}, 1000);
      });
  &lt;/script&gt;
  
  &lt;style type="text/css"&gt;
      .backtotop_button_wrap {width:100%; background:white; height:auto;}
      .backtotop_button_height {width:100%; height:55px;}
      #toTop {display:none; position: fixed; right:0; bottom:0; width:100px; height:auto; background:white; float:right; padding:10px; text-align:center; border:1px solid black; line-height:12px;}
      #footer {width:100%; height:500px; color:white; text-align:center; background:#313131; border-top:1px solid black;}
  &lt;/style&gt;
  
  &lt;div class="backtotop_button_wrap"&gt;
      &lt;div class="backtotop_button_height"&gt;
          &lt;div id="toTop"&gt;^&lt;br /&gt;Back to the Top&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="footer"&gt;
  Footer
  &lt;/div&gt;
  </code></pre>
  
  <p>I've also made a Jfiddle here: <a href="http://jsfiddle.net/0Lge6wqq/" rel="nofollow">http://jsfiddle.net/0Lge6wqq/</a></p>