<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<div class="content">
</div>
<a href="#" class="backtotop"><i class="fa fa-repeat"></i></a>
body {
  background: #dfdfdf;
  height: 5000px;
  width: 100%;
}

.backtotop {
  background: #aaa;
  border-radius: 50%;
  display: block;
  height: 44px;
  line-height: 44px;
  position: fixed;
  right: -60px;
  bottom: 10px;
  text-align: center;
  width: 44px;
}

i {
  color: #fff;
}
$(function() {
  var topBtn = $('.backtotop');

  $(window).scroll(function() {
    if ($(this).scrollTop() > 300) {
      topBtn.stop().animate({
        'right': '10px'
      }, 200, 'linear');
    } else {
      topBtn.stop().animate({
        'right': '-60px'
      }, 200, 'linear');
    }
  });

  topBtn.bind('click', function(event) {
    event.preventDefault();
    $('body,html').stop().animate({
      'scrollTop': 0
    }, 1000, 'easeInQuart', function() {
      topBtn.stop().animate({
        'right': '-60px'
      }, 1000, 'easeInQuart');
    });
  });
});

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