<div class="myDiv"></div>
<button class="scrollToTopBtn">TOP</button>

.myDiv {
  background: linear-gradient(#e66465, #9198e5);
  height: 200vh;
  width: 100%;
}

.scrollToTopBtn {
  position: fixed;
  bottom: 50px;
  right: 50px;
  z-index: 100;
  display: none;
  padding: 8px 4px;
  cursor: pointer;
}

document.addEventListener("scroll", handleScroll);
// get a reference to our predefined button
var scrollToTopBtn = document.querySelector(".scrollToTopBtn");

function handleScroll() {
  var scrollableHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var GOLDEN_RATIO = 0.5;

  if ((document.documentElement.scrollTop / scrollableHeight ) > GOLDEN_RATIO) {
    //show button
    scrollToTopBtn.style.display = "block";
  } else {
    //hide button
    scrollToTopBtn.style.display = "none";
  }
}

scrollToTopBtn.addEventListener("click", scrollToTop);

function scrollToTop() {
  window.scrollTo({
    top: 0,
    behavior: "smooth"
  });
}