# DataFirefly Retour en haut — Documentation

> Le module DataFirefly Retour en haut ajoute un bouton flottant qui ramène vos visiteurs en haut de page d'un seul clic. Ce guide couvre l'installation et l'ensemble des réglages disponibles.…

- Page: <https://www.datafirefly.com/documentation/dfbacktotop/>
- Langue: fr
- Mis à jour le: 2026-06-27
- Autres langues: [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), [pt](https://www.datafirefly.com/pt/documentation/dfbacktotop/index.md)
- Index: <https://www.datafirefly.com/documentation/llms.txt>

Le module **DataFirefly Retour en haut** ajoute un bouton flottant qui ramène vos visiteurs en haut de page d'un seul clic. Ce guide couvre l'installation et l'ensemble des réglages disponibles.

## Installation

1. Dans votre back-office, allez dans **Modules > Module Manager**.
2. Cliquez sur **Installer un module** (en haut à droite) et envoyez l'archive `dfbacktotop.zip`.
3. Une fois l'installation terminée, cliquez sur **Configurer**.

Le module s'enregistre automatiquement sur les hooks `actionFrontControllerSetMedia` et `displayFooter`. Aucune intervention manuelle sur les hooks n'est nécessaire.

## Configuration

La page de configuration se compose de deux onglets : **Comportement** et **Apparence**.

### Onglet Comportement

- **Seuil de déclenchement (px)** — nombre de pixels de défilement à partir duquel le bouton apparaît. Valeur par défaut : `300`.
- **Défilement fluide** — active la remontée animée et progressive. Désactivé, le retour en haut est instantané.
- **Afficher sur mobile** — affiche ou masque le bouton sur les écrans de moins de 768 px de large.

### Onglet Apparence

- **Position** — en bas à droite ou en bas à gauche.
- **Icône** — chevron, flèche ou triangle (icônes SVG intégrées).
- **Taille du bouton** — diamètre du bouton, de 24 à 120 px.
- **Rayon des angles** — de 0 % (carré) à 50 % (cercle).
- **Marge horizontale / verticale** — distance par rapport aux bords de l'écran.
- **Couleur de fond**, **Couleur de fond (survol)**, **Couleur de l'icône** — codes hexadécimaux.
- **Ombre portée** — ajoute une ombre douce sous le bouton.
- **z-index** — augmentez cette valeur si le bouton passe sous d'autres éléments fixes (bandeau cookies, chat, etc.).

Chaque réglage est validé à l'enregistrement : les couleurs doivent être des codes hexadécimaux valides, et la taille comme le rayon sont bornés pour éviter tout affichage cassé.

## Formes du bouton

La forme est entièrement pilotée par le **rayon des angles** :

- `50 %` — cercle parfait.
- `20 %` — carré aux angles arrondis.
- `0 %` — carré net.

## Compatibilité avec votre thème

Le bouton est injecté via le hook `displayFooter`, présent dans le thème Classic et la grande majorité des thèmes PrestaShop. Si votre thème personnalisé n'appelle pas ce hook, le bouton ne s'affichera pas : il suffit d'ajouter l'appel au hook dans le template de pied de page du thème.

## Performance et accessibilité

- JavaScript natif d'environ 1,5 ko, sans jQuery ni dépendance externe.
- Suivi du défilement via `requestAnimationFrame` et écouteur passif, sans impact perceptible sur les Core Web Vitals.
- Bouton natif avec attribut `aria-label` et focus clavier visible.
- Respect de la préférence système `prefers-reduced-motion` : le défilement devient instantané si l'utilisateur a réduit les animations.
- Aucune donnée personnelle collectée — compatible RGPD par conception.

## FAQ

### Le bouton ne s'affiche pas, que vérifier ?

Vérifiez que votre thème implémente le hook `displayFooter` et que vous avez suffisamment défilé pour dépasser le seuil de déclenchement (300 px par défaut). Videz également le cache PrestaShop après installation.

### Puis-je l'utiliser en multiboutique ?

Oui. Les réglages sont enregistrés via `Configuration` et s'appliquent selon le contexte de boutique actif.

### Le module est-il vraiment gratuit ?

Oui, sous licence gratuite, sans limitation de fonctionnalité.