Como Implementar um Botão "Voltar ao Topo" em Seu Site com JavaScript
Tags: javascript, tutorial, ux, webdev
Published: 2024-03-11 03:42:54

A navegação eficiente é crucial para a experiência do usuário em qualquer site, especialmente em páginas longas. Um botão "Voltar ao Topo" pode parecer um detalhe pequeno, mas é um recurso poderoso para melhorar a usabilidade e a satisfação do usuário. Neste post, vamos explorar como adicionar esse botão ao seu site com algumas linhas simples de HTML, CSS e JavaScript.

### Necessidade e Benefício

Um botão "Voltar ao Topo" é essencial em páginas longas porque:

- Facilita a navegação, permitindo que os usuários retornem ao topo da página sem rolagem manual.
- Melhora a acessibilidade, oferecendo uma opção adicional de navegação para usuários.

### Demonstração

Aqui está um GIF demonstrando o botão "Voltar ao Topo" em funcionamento:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ksqwe6h20nrdau6rws33.gif)

### Estrutura Básica do HTML

Para adicionar o botão ao seu site, comece com este simples código HTML, incluindo um `aria-label` para melhor acessibilidade:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Scroll Top</title>
  </head>
  <body>
    <main>
      <!-- Conteúdo da página -->
    </main>
    <button class="btn-scroll-top" arial-label="Voltar ao topo">
      <img
        src="./assets/up-icon.png"
        alt="Voltar ao topo"
        width="50"
        height="50"
      />
    </button>
    <script src="./script.js"></script>
  </body>
</html>
```

### Estilizando com CSS

Agora, vamos estilizar nosso botão para que ele fique fixo na parte inferior direita da tela, e inicialmente fique escondido. Ele só será mostrado quando o usuário rolar para baixo.

```css
* {
  margin: 0;
  padding: 0;
  border: 0;
}

.btn-scroll-top {
  position: fixed;
  right: 2rem;
  bottom: 2rem;

  display: grid;
  place-items: center;

  outline: none;
  border-radius: 100%;

  opacity: 0;

  cursor: pointer;

  pointer-events: none;
  transition: opacity 0.5s ease;

  z-index: 10;
}

.show-btn-scroll-top {
  opacity: 1;
  pointer-events: all;
}
```

### Adicionando a Funcionalidade com JavaScript

Por fim, vamos adicionar a funcionalidade com JavaScript. Queremos que o botão se torne visível quando o usuário rolar para baixo na página. E, ao clicar no botão, a página deve rolar de volta ao topo suavemente.

```js
const btnScrollTop = document.querySelector(".btn-scroll-top");

window.addEventListener("scroll", () => {
  if (window.scrollY > 100) {
    btnScrollTop.classList.add("show-btn-scroll-top");
  } else {
    btnScrollTop.classList.remove("show-btn-scroll-top");
  }
});

btnScrollTop.addEventListener("click", () => {
  window.scrollTo({
    top: 0,
    behavior: "smooth",
  });
});
```

### Conclusão

Com esses simples passos, você adicionou uma funcionalidade útil de "Voltar ao Topo" ao seu site. Esse botão melhora significativamente a navegação do usuário, especialmente em páginas com muito conteúdo. A implementação de recursos como este mostra seu compromisso com uma boa experiência do usuário e a atenção aos detalhes, qualidades valiosas em qualquer desenvolvedor web.

Lembre-se, a experiência do usuário deve ser sempre uma prioridade ao desenvolver websites. Pequenas adições como essa podem fazer uma grande diferença.

Confira o código-fonte completo no [GitHub](https://github.com/kaiquen/scroll-top).