JSFiddle - React, Tailwind, and code Playground

by Thuc Nguyen

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="height: 800px">
  Content
  <div id="back-top" title="Top of Page">&uarr;</div>
</div>

CSS

#back-top {
  border-radius: 5px;
  color: white;
  background: blue;
  padding: 10px;
  position: fixed;
  bottom: 68px;
  right: 25px;
  display: none;
  opacity: 0.8;
  cursor: pointer;
}

JavaScript

$(document).ready(function() {
  $(window).scroll(function() {
    if ($(this).scrollTop() > 300) {
      $('#back-top').fadeIn();
    } else {
      $('#back-top').fadeOut();
    }
  });

  // scroll body to 0px on click
  $('#back-top').click(function() {
    $('body,html').animate({
      scrollTop: 0
    }, 500);
    return false;
  });
});