Edit in JSFiddle

$( function() {
  $('.To_top a').click(function(){
    $('html, body').animate({scrollTop:0}, 500 );
      return false;
  });
});

<div id="header">
    <h1>header</h1>
</div>
<div id="content">
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
</div>
<div id="footer">footer</div>
<div class="To_top"><a title="TOPへ戻る" href="#header">Topへ戻る</a></div>

#header {
    background: #d1d2f3;
    padding:10px;
}
#content {
    background: #ecedfa;
    padding: 10px;
}
#footer {
    background: #d1d2f3;
    padding: 10px;
}
.To_top {
    position: fixed;
    bottom: 50px;
    right: 20px;
    background: #ededed;
    width: 100px;
    height: auto;
    padding: 10px;
   text-align: center;
}