Botão voltar ao topo

Botão voltar ao topo: para que serve

Em páginas longas, o botão de voltar ao topo poupa a pessoa de rolar tudo de volta, principalmente no celular.

Escolha o lado, as cores, o tamanho, o formato, a distância da borda e a partir de quanto ele aparece. O código usa um botão de verdade com rótulo, aparece com uma transição curta, rola suave só para quem não pediu menos movimento, não deixa o botão invisível receber foco e leva o foco para o começo da página.

Como usar

1. Escolha o lado, as cores e o tamanho.
2. Defina a distância e quando ele aparece.
3. Copie o código e cole antes do fim do body.

Quando usar

• Blog e artigos longos.
• Loja com listas grandes de produtos.
• Cardápios e catálogos.

Perguntas frequentes

Quando o botão aparece?

Depois que a pessoa rola a página além da altura que você escolher (uma tela, por padrão). Em páginas curtas ele nunca aparece, o que evita um botão inútil por cima do conteúdo.

Ele atrapalha o botão do WhatsApp?

Pode ficar no mesmo canto. Coloque o voltar ao topo do outro lado ou aumente a distância do rodapé para que um não cubra o outro no celular.

Por que o foco vai para o topo?

Quem navega pelo teclado ou leitor de tela, ao tocar no botão, deve continuar a navegação a partir do início da página. O código move o foco para o primeiro elemento, além de rolar a tela.

É grátis mesmo?

Sim, 100% grátis. Sem cadastro, sem assinatura e sem limite de uso. Todas as ferramentas do Ferramentas123 são gratuitas e rodam direto no seu navegador.

Ferramentas parecidas