# DataFirefly Terug naar Boven: volledige gids

> De module DataFirefly Terug naar Boven voegt een zwevende knop toe die uw bezoekers met één klik terug naar de bovenkant van de pagina brengt. Deze gids behandelt de installatie…

- Pagina: <https://www.datafirefly.com/nl/documentation/dfbacktotop/>
- Taal: nl
- Bijgewerkt op: 2026-08-27
- Andere talen: [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), [pt](https://www.datafirefly.com/pt/documentation/dfbacktotop/index.md)
- Index: <https://www.datafirefly.com/nl/documentation/llms.txt>

De module **DataFirefly Terug naar Boven** voegt een zwevende knop toe die uw bezoekers met één klik terug naar de bovenkant van de pagina brengt. Deze gids behandelt de installatie en alle beschikbare instellingen.

## Installatie

1. Ga in uw backoffice naar **Modules > Modulebeheer**.
2. Klik op **Een module installeren** (rechtsboven) en upload het archief `dfbacktotop.zip`.
3. Klik na afronding van de installatie op **Configureren**.

De module registreert zich automatisch op de hooks `actionFrontControllerSetMedia` en `displayFooter`. Er is geen enkele handmatige ingreep op de hooks nodig.

## Configuratie

De configuratiepagina bestaat uit twee tabbladen: **Gedrag** en **Uiterlijk**.

### Tabblad Gedrag

- **Activeringsdrempel (px)**: aantal gescrolde pixels vanaf welke de knop verschijnt. Standaardwaarde: `300`.
- **Vloeiend scrollen**: activeert het geanimeerde, geleidelijke omhoogscrollen. Uitgeschakeld is de terugkeer naar boven onmiddellijk.
- **Tonen op mobiel**: toont of verbergt de knop op schermen smaller dan 768 px.

### Tabblad Uiterlijk

- **Positie**: rechtsonder of linksonder.
- **Icoon**: chevron, pijl of driehoek (ingebouwde SVG-iconen).
- **Knopgrootte**: diameter van de knop, van 24 tot 120 px.
- **Hoekradius**: van 0% (vierkant) tot 50% (cirkel).
- **Horizontale / verticale marge**: afstand tot de schermranden.
- **Achtergrondkleur**, **Achtergrondkleur (hover)**, **Icoonkleur**: hexadecimale codes.
- **Slagschaduw**: voegt een zachte schaduw onder de knop toe.
- **z-index**: verhoog deze waarde als de knop onder andere vaste elementen verdwijnt (cookiebanner, chat, enzovoort).

Elke instelling wordt bij het opslaan gevalideerd: de kleuren moeten geldige hexadecimale codes zijn, en zowel de grootte als de radius zijn begrensd om elke gebroken weergave te vermijden.

## Vormen van de knop

De vorm wordt volledig aangestuurd door de **hoekradius**:

- `50%`: perfecte cirkel.
- `20%`: vierkant met afgeronde hoeken.
- `0%`: strak vierkant.

## Compatibiliteit met uw thema

De knop wordt geïnjecteerd via de hook `displayFooter`, aanwezig in het Classic-thema en de overgrote meerderheid van de PrestaShop-thema's. Roept uw maatwerkthema deze hook niet aan, dan wordt de knop niet getoond: het volstaat de hook-aanroep toe te voegen aan het footertemplate van het thema.

## Prestaties en toegankelijkheid

- Native JavaScript van ongeveer 1,5 kB, zonder jQuery of externe afhankelijkheid.
- Scrollopvolging via `requestAnimationFrame` en een passieve listener, zonder merkbare impact op de Core Web Vitals.
- Native knop met `aria-label`-attribuut en zichtbare toetsenbordfocus.
- Respect voor de systeemvoorkeur `prefers-reduced-motion`: het scrollen wordt onmiddellijk als de gebruiker de animaties heeft beperkt.
- Geen enkel persoonsgegeven verzameld, AVG-compatibel by design.

## FAQ

### De knop wordt niet getoond, wat te controleren?

Controleer of uw thema de hook `displayFooter` implementeert en of u ver genoeg hebt gescrold om de activeringsdrempel te passeren (standaard 300 px). Leeg ook de PrestaShop-cache na de installatie.

### Kan ik hem in multistore gebruiken?

Ja. De instellingen worden via `Configuration` opgeslagen en gelden volgens de actieve winkelcontext.

### Is de module echt gratis?

Ja, onder gratis licentie, zonder functionele beperking.