Back to Top — Y2 Docs

JS Module

Back to Top Y2Top

Botão flutuante "voltar ao topo" — aparece após 300px de scroll, com variações de estilo, cor e posição.

1. Estilos

Role esta página para ver o botão real aparecer no canto inferior direito.

Padrão

is-pri

is-suc

is-sec

is-drk

is-sq

is-pil

2. Posições

Quatro cantos disponíveis — padrão — inferior direito.

Padrão (br)

is-bl

is-tr

is-tl

3. Como Funciona

Y2Top monitora o scroll da página. Após 300px de scroll, adiciona a classe .is-vis que torna o botão visível. O clique executa scroll suave ao topo.

// Sem scroll  → botão oculto (opacity: 0)
// Após 300px  → .is-vis adicionado → opacity: 1, pointer-events: auto
// Clique      → window.scrollTo({ top: 0, behavior: 'smooth' })

Quick Reference

Atributo / Classe	Elemento	Descrição
`y2top`	button	Ativa o back-to-top (fixed, oculto por padrão)
`.is-vis`	button	Adicionado automaticamente após 300px de scroll
`.is-pri — .is-suc — .is-sec — .is-drk`	button	Variações de cor
`.is-sq`	button	Forma quadrada
`.is-pil`	button	Forma pill — aceita texto ao lado do ícone
`.is-bl — .is-tr — .is-tl`	button	Posição: bottom-left — top-right — top-left (padrão: bottom-right)