Edit in JSFiddle

// Zzbaivong - baivong.github.io

(function($) {
  'use strict';

  // https://davidwalsh.name/javascript-debounce-function
  function debounce(func, wait, immediate) {
    var timeout;
    return function() {
      var context = this,
        args = arguments;
      var later = function() {
        timeout = null;
        if (!immediate) func.apply(context, args);
      };
      var callNow = immediate && !timeout;
      clearTimeout(timeout);
      timeout = setTimeout(later, wait);
      if (callNow) func.apply(context, args);
    };
  };

  var $window = $(window),
    $toTop = $('#bv_back_to_top'),

    backToTop = debounce(function() {
      var scrollTop = $window.scrollTop(),
        winHeight = $window.height();

      scrollTop >= winHeight ? $toTop.addClass('show-back-btn') : $toTop.removeClass('show-back-btn');

    }, 250);

  $window.scroll(backToTop);

  $toTop.click(function() {
    $('body,html').animate({
      scrollTop: 0
    }, 500);
  });

})(jQuery);

<div id="content">Scroll &darr;</div>
<div id="bv_back_to_top"></div>

body {
  min-height: 5000px;
  background: #FF4E50;
  background: linear-gradient(to left, #FF4E50 , #F9D423);
  background: -webkit-linear-gradient(to left, #FF4E50 , #F9D423);
}

#bv_back_to_top {
  cursor: pointer;
  background: url(//i.imgur.com/qAiD8nz.png) no-repeat top left transparent;
  width: 81px;
  height: 81px;
  position: fixed;
  bottom: 140px;
  z-index: 1000;
  right: -81px;
  transition: right 0.5s ease-in, background 0.3s ease-in-out;
  -webkit-transition: right 0.5s ease-in, background 0.3s ease-in-out;
  
  &.show-back-btn {
    right: 0;
  }
  
  &:hover {
    background-position: top right;
  }
}