# DataFirefly Back to Top — Documentation

> The DataFirefly Back to Top module adds a floating button that returns your visitors to the top of the page in a single click. This guide covers installation and every…

- Page: <https://www.datafirefly.com/en/documentation/dfbacktotop/>
- Language: en
- Last updated: 2026-06-27
- Other languages: [fr](https://www.datafirefly.com/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/en/documentation/llms.txt>

The **DataFirefly Back to Top** module adds a floating button that returns your visitors to the top of the page in a single click. This guide covers installation and every available setting.

## Installation

1. In your back office, go to **Modules > Module Manager**.
2. Click **Upload a module** (top right) and send the `dfbacktotop.zip` archive.
3. Once installation is complete, click **Configure**.

The module registers itself automatically on the `actionFrontControllerSetMedia` and `displayFooter` hooks. No manual hook setup is required.

## Configuration

The configuration page has two tabs: **Behavior** and **Appearance**.

### Behavior tab

- **Trigger threshold (px)** — number of scrolled pixels after which the button appears. Default: `300`.
- **Smooth scrolling** — enables the animated, gradual scroll back. When disabled, the return to top is instant.
- **Show on mobile** — shows or hides the button on screens narrower than 768 px.

### Appearance tab

- **Position** — bottom-right or bottom-left.
- **Icon** — chevron, arrow or triangle (built-in SVG icons).
- **Button size** — button diameter, from 24 to 120 px.
- **Corner radius** — from 0% (square) to 50% (circle).
- **Horizontal / vertical margin** — distance from the screen edges.
- **Background color**, **Background color (hover)**, **Icon color** — hexadecimal codes.
- **Drop shadow** — adds a soft shadow under the button.
- **z-index** — increase this value if the button appears under other fixed elements (cookie banner, chat, etc.).

Every setting is validated on save: colors must be valid hexadecimal codes, and both size and radius are bounded to prevent any broken display.

## Button shapes

The shape is entirely driven by the **corner radius**:

- `50%` — perfect circle.
- `20%` — square with rounded corners.
- `0%` — sharp square.

## Theme compatibility

The button is injected via the `displayFooter` hook, present in the Classic theme and the vast majority of PrestaShop themes. If your custom theme does not call this hook, the button will not appear: simply add the hook call to the theme's footer template.

## Performance and accessibility

- Native JavaScript of around 1.5 KB, with no jQuery or external dependency.
- Scroll tracking via `requestAnimationFrame` and a passive listener, with no perceptible impact on Core Web Vitals.
- Native button with an `aria-label` attribute and visible keyboard focus.
- Respects the `prefers-reduced-motion` system preference: scrolling becomes instant if the user has reduced animations.
- No personal data collected — GDPR-friendly by design.

## FAQ

### The button doesn't appear, what should I check?

Make sure your theme implements the `displayFooter` hook and that you have scrolled far enough to pass the trigger threshold (300 px by default). Also clear the PrestaShop cache after installation.

### Can I use it in multistore?

Yes. Settings are saved via `Configuration` and apply according to the active shop context.

### Is the module really free?

Yes, under a free license, with no feature limitation.