Home/Componentes/BackToTopButton

BackToTopButton

Botão flutuante para retornar ao topo da página com detecção automática de scroll.

Preview

O botão aparece automaticamente após rolar 300px da página. Role para baixo para testar!

Botão ativo no footer da página

O BackToTopButton está integrado no layout principal. Role para baixo para vê-lo aparecer.

Conteúdo de Demonstração

Conteúdo adicional para permitir scroll e testar o funcionamento do botão

Seção 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Seção 2

Seção 3

Seção 4

Seção 5

Seção 6

Seção 7

Seção 8

Seção 9

Seção 10

Instalação

Via CLI (Recomendado)

1. Inicializar (primeira vez)

npx @scmposs/hollow-ui init
npx @scmposs/hollow-ui setup

2. Adicionar componente

npx @scmposs/hollow-ui add back-to-top-button

Os comandos init e setup fazem o pré-setup (necessário apenas uma vez). Se você rodar add sem isso, a CLI executa o setup automaticamente.

Via NPM

Instalar pacote completo

npm install @scmposs/hollow-ui@latest

Instala todos os componentes como dependência do projeto.

Uso Básico

Exemplo básico

import { BackToTopButton } from "@scmposs/hollow-ui"

// Uso básico
<BackToTopButton />

Características

🎯 Detecção Automática

Aparece automaticamente após rolar 300px da página

✨ Scroll Suave

Animação suave ao retornar ao topo da página

📱 Responsivo

Posicionamento otimizado para diferentes telas

🤝 Integração

Posicionamento personalizável via props

Props

BackToTopButton Props

offsetRight?string

Controla o posicionamento horizontal. Default: "right-4"

offsetBottom?string

Controla o posicionamento vertical. Default: "bottom-22"

Mais Conteúdo de Teste

Continue rolando para testar o botão de volta ao topo

Exemplo 11

Suspendisse potenti. Nullam euismod, nisl eget ultricies aliquam, nunc nisl aliquet nunc, quis aliquam nisl nunc eget nisl. Sed euismod, nisl eget ultricies aliquam, nunc nisl aliquet nunc, quis aliquam nisl nunc eget nisl.