title: Float a div at the bottom right corner, but not inside footer
body: <p>I'm trying to implement a "go to top" button that floats at the bottom right corner of a page. I can do this with the following code, but I don't want this button to enter the footer of my page. How can I stop it from entering the footer and stay at the top of it when user scrolls the page down to the bottom of the page?</p>
  
  <p>CSS</p>
  
  <pre><code>#to-top {
    position: fixed;
    bottom: 10px;
    right: 10px;
    width: 100px;
    padding: 5px;
    border: 1px solid #ccc;
    background: #f7f7f7;
    color: #333;
    text-align: center;
    cursor: pointer;
    display: none;
  }
  </code></pre>
  
  <p>JavaScript</p>
  
  <pre><code>$(window).scroll(function() {
    if($(this).scrollTop() != 0) {
      $('#to-top').fadeIn(); 
    } else {
      $('#to-top').fadeOut();
    }
  });
  
  $('#to-top').click(function() {
    $('body,html').animate({scrollTop:0},"fast");
  });
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="to-top"&gt;Back to Top&lt;/div&gt;
  </code></pre>
  
  <p><strong>EDIT</strong>
  Here is a drawing of how it should look like. The black vertical rectangle is a scroll bar. The "back to top" button should never enter the footer region.
  <img src="https://i.stack.imgur.com/FysMl.jpg" alt="enter image description here"></p>
  
  <p>Here is a <a href="http://jsfiddle.net/emWMa/1/" rel="nofollow noreferrer">jsfiddle</a>.</p>