SWCore
SWCore / Componentes / Voltar ao topo

Voltar ao topo Componentes

Botão flutuante no canto que aparece depois que a pessoa rola a página e, ao clicar, sobe suave até o começo. <button sw-top='pri'>.

O que é

Em página comprida, depois de rolar bastante, a pessoa quer voltar para o menu sem ficar rolando para cima. O botão "voltar ao topo" resolve: ele fica escondido no começo, aparece no canto da tela depois de uns 300 px de rolagem e, ao ser clicado, leva a página de volta ao começo com uma animação suave. Você escreve um <button sw-top> em qualquer lugar da página e escolhe, com palavras dentro do atributo, a cor, o formato e o canto.

O botão já nasce preso ao canto inferior direito da tela (CSS). O JavaScript do núcleo observa a rolagem e coloca a classe is-vis quando ela passa de sw-top-at (padrão 300 px) — aí o botão aparece subindo um pouquinho. Se o botão estiver dentro de uma caixa que tem rolagem própria, ele volta aquela caixa ao topo; senão, a página. Quem tem "reduzir movimento" ligado no aparelho sobe direto, sem animação.

Quando usar

  • Páginas longas: blog, cardápio, catálogo, landing page, termos de uso.
  • Listas grandes no painel (tabela com rolagem própria): use sw-top-tgt apontando para a lista.
  • Em página curta (cabe numa tela) ele não faz falta — nunca vai aparecer.

Comece aqui

  1. 1

    Coloque o SWCore na página: CSS no <head> e JS no fim do <body>. O segundo CSS traz o ícone da seta.

    <link rel="stylesheet" href="https://swcore.sanweb.com.br/dist/2.1.0/swcore.min.css">
<link rel="stylesheet" href="https://swcore.sanweb.com.br/dist/2.1.0/swcore.compl.min.css">

<!-- fim do <body> -->
<script src="https://swcore.sanweb.com.br/dist/2.1.0/swcore.min.js"></script>
  2. 2

    Coloque o botão uma vez, em qualquer lugar do <body> (normalmente perto do fim). Ele se posiciona sozinho no canto. Role esta página: o botão que aparece no canto inferior direito é um sw-top de verdade.

    <button sw-top="pri" aria-label="Voltar ao topo">
  <i class="swi-up-arrow-alt"></i>
</button>

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

1. Cores

Sete cores. Nos quadros o botão volta a caixinha ao topo (por isso tem sw-top-tgt e sw-top-at="20"); na sua página, deixe só sw-top="cor". Role dentro de cada quadro para ver o botão aparecer.

Role aqui dentro ↓

Corte masculino, barba e sobrancelha com hora marcada.

Atendimento de terça a sábado, das 9h às 20h.

Estacionamento conveniado na rua de trás.

Aceitamos Pix e cartão.

Agora clique no botão para voltar.

pri — primária <button sw-top="pri" sw-top-tgt="#caixa" sw-top-at="20" aria-label="Voltar ao topo"> <i class="swi-up-arrow-alt"></i> </button>

Role aqui dentro ↓

Corte masculino, barba e sobrancelha com hora marcada.

Atendimento de terça a sábado, das 9h às 20h.

Estacionamento conveniado na rua de trás.

Aceitamos Pix e cartão.

Agora clique no botão para voltar.

sec — secundária <button sw-top="sec" sw-top-tgt="#caixa" sw-top-at="20" aria-label="Voltar ao topo"> <i class="swi-up-arrow-alt"></i> </button>

Role aqui dentro ↓

Corte masculino, barba e sobrancelha com hora marcada.

Atendimento de terça a sábado, das 9h às 20h.

Estacionamento conveniado na rua de trás.

Aceitamos Pix e cartão.

Agora clique no botão para voltar.

suc — verde <button sw-top="suc" sw-top-tgt="#caixa" sw-top-at="20" aria-label="Voltar ao topo"> <i class="swi-up-arrow-alt"></i> </button>

Role aqui dentro ↓

Corte masculino, barba e sobrancelha com hora marcada.

Atendimento de terça a sábado, das 9h às 20h.

Estacionamento conveniado na rua de trás.

Aceitamos Pix e cartão.

Agora clique no botão para voltar.

ale — amarelo <button sw-top="ale" sw-top-tgt="#caixa" sw-top-at="20" aria-label="Voltar ao topo"> <i class="swi-up-arrow-alt"></i> </button>

Role aqui dentro ↓

Corte masculino, barba e sobrancelha com hora marcada.

Atendimento de terça a sábado, das 9h às 20h.

Estacionamento conveniado na rua de trás.

Aceitamos Pix e cartão.

Agora clique no botão para voltar.

err — vermelho <button sw-top="err" sw-top-tgt="#caixa" sw-top-at="20" aria-label="Voltar ao topo"> <i class="swi-up-arrow-alt"></i> </button>

Role aqui dentro ↓

Corte masculino, barba e sobrancelha com hora marcada.

Atendimento de terça a sábado, das 9h às 20h.

Estacionamento conveniado na rua de trás.

Aceitamos Pix e cartão.

Agora clique no botão para voltar.

drk — escuro (inverte no tema escuro) <button sw-top="drk" sw-top-tgt="#caixa" sw-top-at="20" aria-label="Voltar ao topo"> <i class="swi-up-arrow-alt"></i> </button>

Role aqui dentro ↓

Corte masculino, barba e sobrancelha com hora marcada.

Atendimento de terça a sábado, das 9h às 20h.

Estacionamento conveniado na rua de trás.

Aceitamos Pix e cartão.

Agora clique no botão para voltar.

lit — claro, com contorno <button sw-top="lit" sw-top-tgt="#caixa" sw-top-at="20" aria-label="Voltar ao topo"> <i class="swi-up-arrow-alt"></i> </button>

2. Formato

Sem palavra de formato ele é um círculo. sqr deixa quadrado com canto discreto; pill vira cápsula e cabe texto ao lado da seta.

Role aqui dentro ↓

Corte masculino, barba e sobrancelha com hora marcada.

Atendimento de terça a sábado, das 9h às 20h.

Estacionamento conveniado na rua de trás.

Aceitamos Pix e cartão.

Agora clique no botão para voltar.

Padrão — círculo <button sw-top="pri" sw-top-tgt="#caixa" sw-top-at="20" aria-label="Voltar ao topo"> <i class="swi-up-arrow-alt"></i> </button>

Role aqui dentro ↓

Corte masculino, barba e sobrancelha com hora marcada.

Atendimento de terça a sábado, das 9h às 20h.

Estacionamento conveniado na rua de trás.

Aceitamos Pix e cartão.

Agora clique no botão para voltar.

sqr — quadrado <button sw-top="pri sqr" sw-top-tgt="#caixa" sw-top-at="20" aria-label="Voltar ao topo"> <i class="swi-up-arrow-alt"></i> </button>

Role aqui dentro ↓

Corte masculino, barba e sobrancelha com hora marcada.

Atendimento de terça a sábado, das 9h às 20h.

Estacionamento conveniado na rua de trás.

Aceitamos Pix e cartão.

Agora clique no botão para voltar.

pill — cápsula com texto <button sw-top="pri pill" sw-top-tgt="#caixa" sw-top-at="20" aria-label="Voltar ao topo"> <i class="swi-up-arrow-alt"></i> Topo </button>

Role aqui dentro ↓

Corte masculino, barba e sobrancelha com hora marcada.

Atendimento de terça a sábado, das 9h às 20h.

Estacionamento conveniado na rua de trás.

Aceitamos Pix e cartão.

Agora clique no botão para voltar.

pill + lit <button sw-top="lit pill" sw-top-tgt="#caixa" sw-top-at="20" aria-label="Voltar ao topo"> <i class="swi-up-arrow-alt"></i> Voltar ao topo </button>

3. Canto

Sem palavra de posição ele fica no canto inferior direito. bl = inferior esquerdo, tr = superior direito, tl = superior esquerdo.

Role aqui dentro ↓

Corte masculino, barba e sobrancelha com hora marcada.

Atendimento de terça a sábado, das 9h às 20h.

Estacionamento conveniado na rua de trás.

Aceitamos Pix e cartão.

Agora clique no botão para voltar.

Padrão — inferior direito <button sw-top="pri" sw-top-tgt="#caixa" sw-top-at="20" aria-label="Voltar ao topo"> <i class="swi-up-arrow-alt"></i> </button>

Role aqui dentro ↓

Corte masculino, barba e sobrancelha com hora marcada.

Atendimento de terça a sábado, das 9h às 20h.

Estacionamento conveniado na rua de trás.

Aceitamos Pix e cartão.

Agora clique no botão para voltar.

bl — inferior esquerdo <button sw-top="pri bl" sw-top-tgt="#caixa" sw-top-at="20" aria-label="Voltar ao topo"> <i class="swi-up-arrow-alt"></i> </button>

Role aqui dentro ↓

Corte masculino, barba e sobrancelha com hora marcada.

Atendimento de terça a sábado, das 9h às 20h.

Estacionamento conveniado na rua de trás.

Aceitamos Pix e cartão.

Agora clique no botão para voltar.

tr — superior direito <button sw-top="pri tr" sw-top-tgt="#caixa" sw-top-at="20" aria-label="Voltar ao topo"> <i class="swi-up-arrow-alt"></i> </button>

Role aqui dentro ↓

Corte masculino, barba e sobrancelha com hora marcada.

Atendimento de terça a sábado, das 9h às 20h.

Estacionamento conveniado na rua de trás.

Aceitamos Pix e cartão.

Agora clique no botão para voltar.

tl — superior esquerdo <button sw-top="pri tl" sw-top-tgt="#caixa" sw-top-at="20" aria-label="Voltar ao topo"> <i class="swi-up-arrow-alt"></i> </button>

4. Quando aparece

sw-top-at é quantos px a pessoa precisa rolar para o botão aparecer. Padrão 300. Compare: no primeiro ele aparece logo; no segundo, só perto do fim do texto.

Role aqui dentro ↓

Corte masculino, barba e sobrancelha com hora marcada.

Atendimento de terça a sábado, das 9h às 20h.

Estacionamento conveniado na rua de trás.

Aceitamos Pix e cartão.

Agora clique no botão para voltar.

sw-top-at="20" — aparece logo <button sw-top="suc" sw-top-tgt="#caixa" sw-top-at="20" aria-label="Voltar ao topo"> <i class="swi-up-arrow-alt"></i> </button>

Role aqui dentro ↓

Corte masculino, barba e sobrancelha com hora marcada.

Atendimento de terça a sábado, das 9h às 20h.

Estacionamento conveniado na rua de trás.

Aceitamos Pix e cartão.

Agora clique no botão para voltar.

sw-top-at="120" — aparece mais tarde <button sw-top="suc" sw-top-tgt="#caixa" sw-top-at="120" aria-label="Voltar ao topo"> <i class="swi-up-arrow-alt"></i> </button>

Tabela de opções

PalavraO que fazExemplo
Cor
priPrimária (é também a cor sem palavra nenhuma).sw-top="pri"
secSecundária.sw-top="sec"
sucVerde.sw-top="suc"
aleAmarelo.sw-top="ale"
errVermelho.sw-top="err"
drkCor do texto (escuro de dia, claro à noite).sw-top="drk"
litCor de superfície, com contorno e seta na cor primária.sw-top="lit"
Formato
(nenhum)Círculo de 44 px.
sqrQuadrado com canto discreto.sw-top="pri sqr"
pillCápsula — cabe texto ao lado do ícone.sw-top="pri pill"
Canto
(nenhum)Inferior direito.
blInferior esquerdo.sw-top="pri bl"
trSuperior direito.sw-top="pri tr"
tlSuperior esquerdo.sw-top="pri tl"
Comportamento
sw-top-atQuantos px rolados até aparecer. Padrão 300. 0 = aparece com qualquer rolagem.sw-top-at="600"
sw-top-tgtSeletor de uma caixa com rolagem própria que ele deve acompanhar e voltar ao topo. Sem ele: a caixa com rolagem mais próxima em volta do botão, ou a página.sw-top-tgt="#lista"
is-visClasse que o JS coloca quando o botão deve aparecer.

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

Blog ou cardápio: botão com texto no canto esquerdo Referência 
<!-- fim do <body>, antes do script -->
<button sw-top="lit pill bl" sw-top-at="600" aria-label="Voltar ao topo">
  <i class="swi-up-arrow-alt"></i> Voltar ao cardápio
</button>
Lista longa num painel (rolagem própria) Ao vivo

Pedidos de hoje — role a lista.

#1041 — Maria S. — R$ 89,90

#1042 — João P. — R$ 45,00

#1043 — Ana L. — R$ 132,50

#1044 — Carlos M. — R$ 18,00

#1045 — Paula R. — R$ 76,40

#1046 — Rafael T. — R$ 240,00

#1047 — Bia C. — R$ 59,90

<div id="pedidos" class="ov-au">   <!-- lista com altura fixa e rolagem própria -->
  …linhas da lista…
</div>
<button sw-top="drk sqr" sw-top-tgt="#pedidos" sw-top-at="80" aria-label="Voltar ao início da lista">
  <i class="swi-chevron-up"></i>
</button>
Contar quantas vezes o botão foi usado (evento) Referência 
document.querySelector('[sw-top]').addEventListener('sw:top:click', (e) => {
  // e.detail.scroller = window (página) ou a caixa que está subindo
  gtag('event', 'voltar_ao_topo');   // exemplo com Google Analytics
});

Eventos

sw:top:click
Disparado no botão quando ele é clicado (a subida começa junto). e.detail.scroller = window ou a caixa que está sendo rolada.

API (JavaScript)

SW.Top.initAll(raiz)
Liga os botões [sw-top] dentro de raiz que ainda não foram ligados. O núcleo já faz sozinho.

Precisa de quê

  • swcore.min.css + swcore.min.js — sem o JS o botão fica invisível (ele só aparece quando o JS coloca is-vis).
  • swcore.compl.min.css — o ícone swi-* da seta.

Cuidados — erros comuns

  • Achar que o botão "sumiu": ele fica invisível até a pessoa rolar sw-top-at px. Em página curta, nunca aparece.
  • Esquecer o aria-label no botão só com ícone: quem usa leitor de tela não sabe o que ele faz.
  • Colocar dois botões no mesmo canto (ex.: WhatsApp flutuante e voltar ao topo): um cobre o outro. Mande um para bl.
  • Botão dentro de uma caixa com rolagem que ainda não tem conteúdo suficiente para rolar: ele acompanha a página. Nesse caso, use sw-top-tgt apontando para a caixa.

O que ele não faz

  • Sempre sobe até o começo (0) — não para numa seção. Para ir a uma seção, use um link com sw-scroll.
  • A distância do canto é fixa pelo espaçamento do SWCore; para outra distância, ajuste no seu CSS.
← AnteriorScrollspy Próximo →Paginação