# DataFirefly Torna su — Documentazione

> Il modulo DataFirefly Torna su aggiunge un pulsante flottante che riporta i tuoi visitatori in cima alla pagina con un solo clic. Questa guida copre l'installazione e tutte le impostazioni…

- Pagina: <https://www.datafirefly.com/it/documentation/dfbacktotop/>
- Lingua: it
- Aggiornato il: 2026-06-27
- Altre lingue: [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), [pl](https://www.datafirefly.com/pl/documentation/dfbacktotop/index.md), [nl](https://www.datafirefly.com/nl/documentation/dfbacktotop/index.md), [pt](https://www.datafirefly.com/pt/documentation/dfbacktotop/index.md)
- Indice: <https://www.datafirefly.com/it/documentation/llms.txt>

Il modulo **DataFirefly Torna su** aggiunge un pulsante flottante che riporta i tuoi visitatori in cima alla pagina con un solo clic. Questa guida copre l'installazione e tutte le impostazioni disponibili.

## Installazione

1. Nel tuo back office, vai su **Moduli > Gestore moduli**.
2. Clicca su **Carica un modulo** (in alto a destra) e invia l'archivio `dfbacktotop.zip`.
3. Al termine dell'installazione, clicca su **Configura**.

Il modulo si registra automaticamente sugli hook `actionFrontControllerSetMedia` e `displayFooter`. Non è necessaria alcuna configurazione manuale degli hook.

## Configurazione

La pagina di configurazione ha due schede: **Comportamento** e **Aspetto**.

### Scheda Comportamento

- **Soglia di attivazione (px)** — numero di pixel di scorrimento dopo il quale appare il pulsante. Valore predefinito: `300`.
- **Scorrimento fluido** — attiva il ritorno animato e graduale. Disattivato, il ritorno in cima è istantaneo.
- **Mostra su mobile** — mostra o nasconde il pulsante sugli schermi di larghezza inferiore a 768 px.

### Scheda Aspetto

- **Posizione** — in basso a destra o in basso a sinistra.
- **Icona** — chevron, freccia o triangolo (icone SVG integrate).
- **Dimensione del pulsante** — diametro del pulsante, da 24 a 120 px.
- **Raggio degli angoli** — da 0% (quadrato) a 50% (cerchio).
- **Margine orizzontale / verticale** — distanza dai bordi dello schermo.
- **Colore di sfondo**, **Colore di sfondo (hover)**, **Colore dell'icona** — codici esadecimali.
- **Ombra** — aggiunge un'ombra morbida sotto il pulsante.
- **z-index** — aumenta questo valore se il pulsante appare sotto altri elementi fissi (banner cookie, chat, ecc.).

Ogni impostazione viene validata al salvataggio: i colori devono essere codici esadecimali validi, e sia la dimensione sia il raggio sono limitati per evitare qualsiasi visualizzazione errata.

## Forme del pulsante

La forma è interamente pilotata dal **raggio degli angoli**:

- `50%` — cerchio perfetto.
- `20%` — quadrato con angoli arrotondati.
- `0%` — quadrato netto.

## Compatibilità con il tuo tema

Il pulsante viene iniettato tramite l'hook `displayFooter`, presente nel tema Classic e nella grande maggioranza dei temi PrestaShop. Se il tuo tema personalizzato non richiama questo hook, il pulsante non apparirà: è sufficiente aggiungere la chiamata all'hook nel template del piè di pagina del tema.

## Prestazioni e accessibilità

- JavaScript nativo di circa 1,5 KB, senza jQuery né dipendenze esterne.
- Rilevamento dello scorrimento tramite `requestAnimationFrame` e un listener passivo, senza impatto percepibile sui Core Web Vitals.
- Pulsante nativo con attributo `aria-label` e focus da tastiera visibile.
- Rispetta la preferenza di sistema `prefers-reduced-motion`: lo scorrimento diventa istantaneo se l'utente ha ridotto le animazioni.
- Nessuna raccolta di dati personali — conforme al GDPR by design.

## FAQ

### Il pulsante non appare, cosa controllare?

Assicurati che il tuo tema implementi l'hook `displayFooter` e di aver scorrato abbastanza da superare la soglia di attivazione (300 px per impostazione predefinita). Svuota anche la cache di PrestaShop dopo l'installazione.

### Posso usarlo in multinegozio?

Sì. Le impostazioni vengono salvate tramite `Configuration` e si applicano in base al contesto del negozio attivo.

### Il modulo è davvero gratuito?

Sì, con licenza gratuita, senza limitazioni di funzionalità.