hey!
<main id="top">
  <section>section 1</section>
  <section>section 2</section>
</main>
<a href="#top" class="gotop" >TOP</a>

// html { scroll-behavior: smooth; }
main {
  padding-top: 300px;
  
  
  section {
    width: 100%;
    height: 1000px;
    background-color: #eee;
    &:nth-child(2) {
      background-color: #159;
    }
  }
}

.gotop {
  cursor: pointer;
  position: fixed;
  bottom: 64px;
  right: 30px;
  width: 40px;
  text-align: center;
  line-height: 40px;
  color: #fff;
  background: #999;
  border-radius: 3px;
}

var ready = callback => {
  if (document.readyState != 'loading') callback();
  else document.addEventListener('DOMContentLoaded', callback);
};

ready(event => {
  const scrollTo = (element, to, duration) => {
    if (duration <= 0) {
      return;
    }
    var difference = to - element.scrollTop;
    var perTick = (difference / duration) * 10;

    setTimeout(() => {
      element.scrollTop = element.scrollTop + perTick;
      if (element.scrollTop === to) {
        return;
      }
      scrollTo(element, to, duration - 10);
    }, 10);
  };

  var gotop = document.querySelector('.gotop');
  var html = document.documentElement;


  gotop.addEventListener('click', (e) => {
    e.preventDefault();
    // window.scrollTo({ top: 0, behavior: 'smooth' });
    scrollTo(html, 0, 800);
  });
});