# DataFirefly Voltar ao Topo: documentação

> O módulo DataFirefly Voltar ao Topo acrescenta um botão flutuante que leva os visitantes ao topo da página com um só clique. Este guia cobre a instalação e todas as…

- Página: <https://www.datafirefly.com/pt/documentation/dfbacktotop/>
- Idioma: pt
- Atualizado em: 2026-09-16
- Outros idiomas: [fr](https://www.datafirefly.com/documentation/dfbacktotop/index.md), [en](https://www.datafirefly.com/en/documentation/dfbacktotop/index.md), [es](https://www.datafirefly.com/es/documentation/dfbacktotop/index.md), [de](https://www.datafirefly.com/de/documentation/dfbacktotop/index.md), [it](https://www.datafirefly.com/it/documentation/dfbacktotop/index.md), [pl](https://www.datafirefly.com/pl/documentation/dfbacktotop/index.md), [nl](https://www.datafirefly.com/nl/documentation/dfbacktotop/index.md)
- Índice: <https://www.datafirefly.com/pt/documentation/llms.txt>

O módulo **DataFirefly Voltar ao Topo** acrescenta um botão flutuante que leva os visitantes ao topo da página com um só clique. Este guia cobre a instalação e todas as definições disponíveis.

## Instalação

1. No back-office, vá a **Módulos > Gestor de módulos**.
2. Clique em **Instalar um módulo** (canto superior direito) e carregue o ficheiro `dfbacktotop.zip`.
3. Terminada a instalação, clique em **Configurar**.

O módulo regista-se automaticamente nos hooks `actionFrontControllerSetMedia` e `displayFooter`. Não é necessária qualquer intervenção manual nos hooks.

## Configuração

A página de configuração tem dois separadores: **Comportamento** e **Aspeto**.

### Separador Comportamento

- **Limiar de ativação (px)** — número de pixels de deslocamento a partir do qual o botão aparece. Valor por omissão: `300`.
- **Deslocamento suave** — ativa a subida animada e progressiva. Desativado, o regresso ao topo é instantâneo.
- **Mostrar no telemóvel** — mostra ou oculta o botão nos ecrãs com menos de 768 px de largura.

### Separador Aspeto

- **Posição** — em baixo à direita ou em baixo à esquerda.
- **Ícone** — divisa, seta ou triângulo (ícones SVG integrados).
- **Tamanho do botão** — diâmetro do botão, de 24 a 120 px.
- **Raio dos cantos** — de 0 % (quadrado) a 50 % (círculo).
- **Margem horizontal / vertical** — distância em relação aos limites do ecrã.
- **Cor de fundo**, **Cor de fundo (ao passar o rato)**, **Cor do ícone** — códigos hexadecimais.
- **Sombra** — acrescenta uma sombra suave por baixo do botão.
- **z-index** — aumente este valor se o botão ficar por baixo de outros elementos fixos (barra de cookies, chat, etc.).

Cada definição é validada ao gravar: as cores têm de ser códigos hexadecimais válidos, e tanto o tamanho como o raio estão limitados para evitar qualquer apresentação partida.

## Formas do botão

A forma é inteiramente controlada pelo **raio dos cantos**:

- `50 %` — círculo perfeito.
- `20 %` — quadrado de cantos arredondados.
- `0 %` — quadrado sem arredondamento.

## Compatibilidade com o seu tema

O botão é injetado através do hook `displayFooter`, presente no tema Classic e na grande maioria dos temas PrestaShop. Se o seu tema personalizado não chamar este hook, o botão não aparece: basta acrescentar a chamada ao hook no template de rodapé do tema.

## Desempenho e acessibilidade

- JavaScript nativo de cerca de 1,5 kB, sem jQuery nem dependências externas.
- Deteção do deslocamento através de `requestAnimationFrame` e de um listener passivo, sem impacto percetível nos Core Web Vitals.
- Botão nativo com atributo `aria-label` e foco de teclado visível.
- Respeito pela preferência do sistema `prefers-reduced-motion`: o deslocamento passa a instantâneo se o utilizador tiver reduzido as animações.
- Não recolhe qualquer dado pessoal, pelo que é compatível com o RGPD por conceção.

## FAQ

### O botão não aparece, o que devo verificar?

Verifique se o seu tema implementa o hook `displayFooter` e se deslocou a página o suficiente para ultrapassar o limiar de ativação (300 px por omissão). Limpe também o cache do PrestaShop depois da instalação.

### Posso usá-lo em multiloja?

Sim. As definições são guardadas através de `Configuration` e aplicam-se conforme o contexto de loja ativo.

### O módulo é mesmo gratuito?

Sim, com licença gratuita e sem qualquer limitação de funcionalidades.

### As etiquetas do botão estão em português?

O botão não apresenta texto visível: só o atributo `aria-label`, lido pelos leitores de ecrã, depende das traduções do módulo. Se o pacote não incluir o português, indique a tradução em **Internacional > Traduções** para que o botão seja anunciado em português.