JS Component

Back to Top [sw-top]

Botão flutuante que aparece após 300px de rolagem e leva ao topo com scroll suave. Role esta página pra ver o botão de verdade no canto inferior direito.

1. Uso

2. Cores

Pré-visualização estática abaixo (o botão real é position:fixed — pra comparar vários de uma vez sem sobrepor, estes ficam fixados no lugar só aqui na demo).

.is-pri
.is-suc
.is-sec
.is-drk

3. Formas

.is-sq
.is-pil

4. Posições

Por padrão fica no canto inferior direito. Use .is-bl/.is-tr/.is-tl pra outros cantos.

Referência

Atributo/ClasseDescrição
[sw-top]Ativa o botão — fica fixo, canto inferior direito por padrão.
.is-visClasse adicionada automaticamente após 300px de scroll (controla a visibilidade via CSS).
.is-pri / .is-suc / .is-sec / .is-drkVariantes de cor.
.is-sqCantos quadrados em vez de circular.
.is-pilFormato pílula — largura automática, aceita texto ao lado do ícone.
.is-bl / .is-tr / .is-tlReposiciona pro canto inferior-esquerda / superior-direita / superior-esquerda.