Como criar: botão para retornar ao topo da página

Como criar um botão de rolagem para o topo

Primeira etapa - Adicionar HTML:

Crie um botão que, ao ser clicado, levará o usuário ao topo da página:

<button onclick="topFunction()" id="myBtn" title="Ir ao topo">Topo</button>

Segunda etapa - Adicionar CSS:

Definir o estilo do botão:

#myBtn {
  display: none; /* Por padrão, está oculto */
  position: fixed; /* Posição fixa/adesiva */
  bottom: 20px; /* Colocar o botão no fundo da página */
  right: 30px; /* Colocar o botão a 30px da direita da página */
  z-index: 99; /* Garantir que não se sobreponha */
  border: none; /* Remover a borda */
  outline: none; /* Remover a contorno */
  background-color: red; /* Definir a cor de fundo */
  color: white; /* Cor do texto */
  cursor: pointer; /* Adicionar o cursor de ponteiro ao passar o mouse */
  padding: 15px; /* Alguns espaços internos */
  border-radius: 10px; /* Arredondar os cantos */
  font-size: 18px; /* Aumentar o tamanho da fonte */
}
#myBtn:hover {
  background-color: #555; /* Adicionar fundo cinza escuro ao passar o mouse */
}

Terceiro passo - Adicionar JavaScript:

// Obter o botão:
let mybutton = document.getElementById("myBtn");
// Quando o usuário rolar 20px para baixo do topo do documento, mostrar o botão
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    mybutton.style.display = "block";
  } else {
    mybutton.style.display = "none";
  }
}
// Quando o usuário clicar no botão, rolar até o topo do documento
function topFunction() {
  document.body.scrollTop = 0; // Para Safari
  document.documentElement.scrollTop = 0; // Aplicável aos navegadores Chrome, Firefox, IE e Opera
}

Experimente você mesmo