Voltar ao topo Componentes

Botão flutuante que aparece depois de rolar e leva de volta ao topo da página.

O que é

Conveniência clássica de páginas longas — some quando você está perto do topo, aparece depois de 300px de scroll.

Como funciona

Um único listener de scroll (compartilhado entre todos os botões [sw-top] da página) alterna a classe is-vis.

Exemplos

Uso Ao vivo

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

Cores Ao vivo

.is-pri

.is-suc

.is-sec

.is-drk

<button sw-top class="is-suc">...</button>
<!-- Variantes: is-pri | is-sec | is-drk -->

Formas Ao vivo

padrão (circular)

.is-sq

.is-pil

<button sw-top class="is-sq">...</button>
<button sw-top class="is-pil"><i class="swi-up-arrow-alt"></i> Topo</button>

Posições Ao vivo

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

<button sw-top class="is-tl">...</button> <!-- topo-esquerda -->
<button sw-top class="is-tr">...</button> <!-- topo-direita -->
<button sw-top class="is-bl">...</button> <!-- baixo-esquerda -->
<button sw-top>...</button>               <!-- baixo-direita (padrão) -->

Atributos

Nenhum.

Variantes

is-pri / is-suc / is-sec / is-drk

variantes de cor

is-sq

cantos quadrados em vez de circular

is-pil

formato pílula — largura automática, aceita texto ao lado do ícone

is-bl / is-tr / is-tl

reposiciona pro canto inferior-esquerdo / superior-direito / superior-esquerdo (padrão é inferior-direito)

Eventos

Nenhum.

API (JavaScript)

Nenhum.

Requisitos

Nenhuma.

Limitações — o que ele não faz

Nas demos acima, os botões ficam presos no lugar (não fixos na tela) só pra dar pra comparar vários lado a lado — o botão real "Voltar ao topo" desta própria documentação (canto inferior direito) já usa este componente com position:fixed normal.

← AnteriorScrollspy Próximo →Pagination