DataFirefly Terug naar Boven: volledige gids
De knop "Terug naar boven" installeren en configureren op PrestaShop 8 en 9.
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
- Ga in uw backoffice naar Modules > Modulebeheer.
- Klik op Een module installeren (rechtsboven) en upload het archief
dfbacktotop.zip. - 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
requestAnimationFrameen 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.