JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" id="totop"></a>

CSS

html, body {
  height: 3000px;
}

#totop {
  position: fixed;
  bottom: 10%;
  right: 10%;
  background: red;
  width: 50px;
  height: 50px;
  cursor: pointer;
  opacity: 0;
  transition: all 0.5s linear;
  visibility: hidden;
}
#totop.show {
  opacity: 1;
  visibility: visible;
}

JavaScript

var toTop = document.getElementById('totop'),
		toTopIsVisible = false,
    duration = 1000;

window.onscroll = function() {
  if (window.pageYOffset > document.documentElement.clientHeight != toTopIsVisible) {
  	toTopIsVisible = !toTopIsVisible;
    toTop.classList.toggle('show', toTopIsVisible);
  }
}

toTop.onclick = function(e) {
  var step = window.pageYOffset / (duration / (1E3 / 60));
  var begin = performance.now();  
  window.requestAnimationFrame(function foo(time) {
    window.scrollBy(0, -step);

    if(window.pageYOffset) {
      window.requestAnimationFrame(foo);
    }
    else {alert(time-begin)}
  });

  return false;
};