title: Jquery Animated Back to Top
body: <p>I'm currently trying to make a button which will take the user back to the top of the page, but animated. Making the page scroll back up to the top when the button is clicked. I did a search on here and found <a href="https://stackoverflow.com/questions/4518862/jquery-animated-return-to-top-of-page-on-click">this</a>..</p>
  
  <p>And I have attempted to make a <a href="http://jsfiddle.net/HX3ww/1/" rel="nofollow noreferrer">JSfiddle</a> of this using the following...</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>html {
  margin:0;
  padding:0;
  height:2000px;
  }
  
  body {
  height:2000px;   
  }
  
  #blue-box {
  position:fixed;
  width:100px;
  height:70px;
  margin-left:0px;
  margin-top:50px;
  background-color:blue;     
  }
  
  #blue-box h1{
  font-family:Constantia;
  font-size:20px;
  text-align:center;
  margin-top:5px;
  color:#FFFFFF;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="blue-box"&gt;
  &lt;h1&gt;Back To Top&lt;/h1&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>$(document).ready(function() {
  var away = false;
  
  $('#blue-box').click(function() {
  $("html, body").animate({scrollTop: 0}, 500);
  });
  </code></pre>
  
  <p>Unfortunately, this doesn't seem to work and I'm wondering whether I have missed something out or done something obviously wrong?</p>