CodeWiki

Como Adicionar um Botão de Voltar ao Topo

Um botão de "voltar ao topo" melhora a navegação, permitindo que o usuário volte rapidamente ao início da página. Abaixo estão os passos para implementá-lo:

1. Estrutura HTML

Adicione um botão ao final do corpo da página:

<button id="back-to-top" title="Voltar ao topo">&uarr;</button>

id="back-to-top": Um identificador único para personalizar o botão e controlá-lo com JavaScript.
Conteúdo ↑: Um símbolo de seta para cima. Você pode trocar por outro caractere ou ícone, como uma imagem.

2. Estilo CSS

Crie o design do botão com o seguinte CSS:

#back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 20px;
    cursor: pointer;
    display: none; /* Oculto inicialmente */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    transition: opacity 0.3s ease;
}

#back-to-top:hover {
    background-color: #0056b3;
}

Posição fixa (position: fixed): Permite que o botão permaneça visível no canto da tela ao rolar.
display: none;: O botão só aparece quando a rolagem atinge uma posição específica.
Efeitos visuais: box-shadow adiciona profundidade, e transition suaviza as mudanças.

3. Lógica em JavaScript

Implemente a funcionalidade com este script:

// Obtenha o botão
const backToTopButton = document.getElementById("back-to-top");

// Mostrar ou esconder o botão com base na rolagem
window.onscroll = function () {
    if (window.scrollY > 300) { // Mostra após 300px de rolagem
        backToTopButton.style.display = "block";
    } else {
        backToTopButton.style.display = "none";
    }
};

// Rolar para o topo quando o botão for clicado
backToTopButton.onclick = function () {
    window.scrollTo({
        top: 0,
        behavior: "smooth" // Suaviza o movimento
    });
};

window.scrollY: Detecta a posição de rolagem vertical.
window.scrollTo: Rola para o topo da página de forma suave (behavior: "smooth").

4. Onde Inserir

HTML: Coloque o botão dentro do <body>.
CSS: Inclua no arquivo de estilos principal ou dentro de uma tag <style>.
JavaScript: Adicione o código em um arquivo .js externo ou em uma tag <script> ao final do HTML.

5. Personalização

Tamanho: Ajuste as propriedades width e height no CSS.
Posição: Modifique os valores de bottom e right.
Ícone: Substitua o conteúdo ↑ por um ícone de biblioteca como Font Awesome ou Material Icons.