<div id="container">
  <header id="header">
    header
  </header>

  <div id="content">
    contents
  </div>

  <footer id="footer">
    footer
    <div id="backtotop">
      <a href="#header">TOP</a>
    </div>
  </footer>
</div>
* {
  font-family: 'Raleway', sans-serif;
  font-size: 30px;
  text-align: center;
}

#container {
  width: 500px;
  margin: 0 auto;
}

#header {
  background-color: #A18E5C;
  color: #fff;
  width: 100%;
  height: 100px;
  line-height: 100px;
}

#content {
  background-color: #E3DECC;
  color: #292929;
  width: 100%;
  height: 600px;
  line-height: 600px;
}

#footer {
  background-color: #A18E5C;
  color: #fff;
  width: 100%;
  height: 100px;
  line-height: 100px;
}

#backtotop {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9000;
  width: 70px;
  height: 70px;
}

#backtotop a {
  color: #fff;
  width: 70px;
  height: 70px;
  text-decoration: none;
  display: block;
  line-height: 70px;
  font-size: 14px;
  background-color: #333333;
  border: 1px solid #FFF;
  border-radius: 50%;
}
$(function() {
  var topBtn = $('#backtotop');

  topBtn.hide();

    
  $(window).on('scroll', function() {
    if ($(this).scrollTop() > 200) {
      topBtn.fadeIn();
    } else  {
      topBtn.fadeOut();
    }
  });    
  topBtn.on('click', function() { 
    $('*').animate({
      scrollTop: 0
    }, 700, 'easeOutQuint');
    return false;  
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. //cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js