# DataFirefly Nach oben — Dokumentation

> Das Modul DataFirefly Nach oben fügt einen schwebenden Button hinzu, der Ihre Besucher mit nur einem Klick an den Seitenanfang zurückbringt. Diese Anleitung behandelt die Installation und alle verfügbaren Einstellungen.…

- Seite: <https://www.datafirefly.com/de/documentation/dfbacktotop/>
- Sprache: de
- Aktualisiert am: 2026-06-27
- Weitere Sprachen: [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), [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/de/documentation/llms.txt>

Das Modul **DataFirefly Nach oben** fügt einen schwebenden Button hinzu, der Ihre Besucher mit nur einem Klick an den Seitenanfang zurückbringt. Diese Anleitung behandelt die Installation und alle verfügbaren Einstellungen.

## Installation

1. Gehen Sie im Back-Office zu **Module > Modul-Manager**.
2. Klicken Sie auf **Ein Modul hochladen** (oben rechts) und senden Sie das Archiv `dfbacktotop.zip`.
3. Klicken Sie nach Abschluss der Installation auf **Konfigurieren**.

Das Modul registriert sich automatisch an den Hooks `actionFrontControllerSetMedia` und `displayFooter`. Eine manuelle Hook-Einrichtung ist nicht erforderlich.

## Konfiguration

Die Konfigurationsseite hat zwei Tabs: **Verhalten** und **Erscheinungsbild**.

### Tab Verhalten

- **Auslöseschwelle (px)** — Anzahl der gescrollten Pixel, ab der der Button erscheint. Standard: `300`.
- **Sanftes Scrollen** — aktiviert die animierte, schrittweise Rückkehr. Deaktiviert erfolgt die Rückkehr nach oben sofort.
- **Auf Mobilgeräten anzeigen** — zeigt oder verbirgt den Button auf Bildschirmen unter 768 px Breite.

### Tab Erscheinungsbild

- **Position** — unten rechts oder unten links.
- **Icon** — Chevron, Pfeil oder Dreieck (integrierte SVG-Icons).
- **Button-Größe** — Durchmesser des Buttons, von 24 bis 120 px.
- **Eckenradius** — von 0 % (eckig) bis 50 % (Kreis).
- **Horizontaler / vertikaler Rand** — Abstand zu den Bildschirmrändern.
- **Hintergrundfarbe**, **Hintergrundfarbe (Hover)**, **Icon-Farbe** — Hexadezimalcodes.
- **Schlagschatten** — fügt einen weichen Schatten unter dem Button hinzu.
- **z-index** — erhöhen Sie diesen Wert, wenn der Button unter anderen festen Elementen erscheint (Cookie-Banner, Chat usw.).

Jede Einstellung wird beim Speichern validiert: Farben müssen gültige Hexadezimalcodes sein, und sowohl Größe als auch Radius sind begrenzt, um eine fehlerhafte Darstellung zu verhindern.

## Button-Formen

Die Form wird vollständig über den **Eckenradius** gesteuert:

- `50 %` — perfekter Kreis.
- `20 %` — Quadrat mit abgerundeten Ecken.
- `0 %` — scharfkantiges Quadrat.

## Theme-Kompatibilität

Der Button wird über den Hook `displayFooter` eingefügt, der im Classic-Theme und der großen Mehrheit der PrestaShop-Themes vorhanden ist. Wenn Ihr individuelles Theme diesen Hook nicht aufruft, erscheint der Button nicht: Fügen Sie einfach den Hook-Aufruf in das Footer-Template des Themes ein.

## Performance und Barrierefreiheit

- Natives JavaScript von etwa 1,5 KB, ohne jQuery oder externe Abhängigkeit.
- Scroll-Erkennung über `requestAnimationFrame` und einen passiven Listener, ohne spürbaren Einfluss auf die Core Web Vitals.
- Nativer Button mit `aria-label`-Attribut und sichtbarem Tastaturfokus.
- Berücksichtigt die Systemeinstellung `prefers-reduced-motion`: Das Scrollen wird sofort, wenn der Nutzer Animationen reduziert hat.
- Keine Erfassung personenbezogener Daten — DSGVO-freundlich konzipiert.

## FAQ

### Der Button erscheint nicht, was ist zu prüfen?

Stellen Sie sicher, dass Ihr Theme den Hook `displayFooter` implementiert und dass Sie weit genug gescrollt haben, um die Auslöseschwelle (standardmäßig 300 px) zu überschreiten. Leeren Sie außerdem den PrestaShop-Cache nach der Installation.

### Kann ich es im Multistore verwenden?

Ja. Die Einstellungen werden über `Configuration` gespeichert und gelten je nach aktivem Shop-Kontext.

### Ist das Modul wirklich kostenlos?

Ja, unter einer kostenlosen Lizenz, ohne Funktionsbeschränkung.