Ваши вопросы модераторам

<button id="toTop" class="to-top" aria-label="Наверх" title="Наверх">
  <svg viewBox="0 0 24 24" aria-hidden="true">
    <path d="M12 5l7 7-1.4 1.4L13 9.8V19h-2V9.8L6.4 13.4 5 12z"/>
  </svg>
</button>

:root{
  --tt-bg: rgba(20,20,20,.85);
  --tt-fg: #fff;
  --tt-size: 44px;
  --tt-radius: 9999px;
  --tt-shadow: 0 6px 20px rgba(0,0,0,.3);
}
.to-top{
  position: fixed;
  bottom: max(16px, env(safe-area-inset-bottom));
  left:  max(16px, env(safe-area-inset-left));
  width: var(--tt-size);
  height: var(--tt-size);
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--tt-radius);
  background: var(--tt-bg);
  color: var(--tt-fg);
  box-shadow: var(--tt-shadow);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  z-index: 9999;
  pointer-events: auto;
}
.to-top svg{ width:22px; height:22px; fill: currentColor; }
.to-top:focus{ outline:2px solid #fff; outline-offset:2px; }
.to-top.show{ opacity:1; visibility:visible; transform:translateY(0); transition:opacity .2s, transform .2s; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

<script>
(function(){
  var btn = document.getElementById('toTop');
  var showAt = 300; // px
  function onScroll(){
    if (window.scrollY > showAt) btn.classList.add('show');
    else btn.classList.remove('show');
  }
  window.addEventListener('scroll', onScroll, {passive:true});
  btn.addEventListener('click', function(){
    var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    window.scrollTo({ top: 0, behavior: reduce ? 'auto' : 'smooth' });
  });
})();
</script>