A light weight Back to top in jQuery

gistfile1.txt

<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css?ver=4.8.2' type='text/css' />
<a class="back-to-top" title="Page Up" style="color: #eadede; font-size:32px; position: fixed; bottom:20px; right:15px;" href="#top"><i class="fa fa-arrow-circle-up" aria-hidden="true"></i></a>
<script>
var jQuerybackToTop = jQuery(".back-to-top");
jQuerybackToTop.hide();
jQuery(window).on('scroll', function() {
  if (jQuery(this).scrollTop() > 400) { // Show button after X scroll
    jQuerybackToTop.fadeIn();
  } else {
    jQuerybackToTop.fadeOut();
  }
});
jQuerybackToTop.on('click', function(e) {
  jQuery("html, body").animate({scrollTop: 0}, 1000); // Speed
});
// Inspired by https://codepen.io/jurbank/pen/PZpNjm
</script>

How to implement in WordPress?

1. Add a new snippet in your Theme Function. Note: If you already using Font awesome CSS, you may skip to step 2.

// Font awesome stylesheet
function enqueue_our_required_stylesheets(){
	wp_enqueue_style('font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); 
}
add_action('wp_enqueue_scripts','enqueue_our_required_stylesheets');

2. In last, add a Custom HTML widget in the Primary Sidebar,

<a class="back-to-top" title="Page Up" style="color: #eadede; font-size:32px; position: fixed; bottom:20px; right:15px;" href="#top"><i class="fa fa-arrow-circle-up" aria-hidden="true"></i></a>
<script>
var jQuerybackToTop = jQuery(".back-to-top");
jQuerybackToTop.hide();
jQuery(window).on('scroll', function() {
  if (jQuery(this).scrollTop() > 400) { // Show button after X scroll
    jQuerybackToTop.fadeIn();
  } else {
    jQuerybackToTop.fadeOut();
  }
});
jQuerybackToTop.on('click', function(e) {
  jQuery("html, body").animate({scrollTop: 0}, 1000); // Speed
});
// Inspired by https://codepen.io/jurbank/pen/PZpNjm
</script>

That's it.