Smart Scroll Buttons – Nach oben und Nach unten scrollen mit Live-Vorschau

Lange Seiten brauchen einen Rückweg

Eine Kategorie mit sechzig Produkten, eine Filterspalte, eine endlose CMS-Seite, eine Liste im Back Office – der Besucher scrollt, findet das Gesuchte und muss anschließend den ganzen Weg zurück nach oben. Eine kleine Reibung, die sich auf jeder langen Seite wiederholt, und eine einzige Schaltfläche schafft Abhilfe. Dieses Modul gibt Ihnen gleich zwei.

Zwei Schaltflächen, jede für sich konfiguriert

• „Nach oben“ erscheint, sobald ein Besucher nach unten gescrollt hat. Ein Klick scrollt sanft zurück an den Seitenanfang.
• „Nach unten scrollen“ wird angezeigt, solange noch mehr Seite darunter liegt. Ein Klick springt ans Ende – praktisch bei langen Listen und auf Seiten, deren eigentliches Ziel, etwa ein Formular oder ein Kontaktblock, ganz unten sitzt.

Das ist nicht eine Einstellung, die zweimal greift. Jede Schaltfläche hat ihre eigene Form, Breite, Höhe, Hintergrundfarbe, Symbolfarbe, ihre eigenen Ränder, ihren eigenen z-index und ihre eigene Scrollgeschwindigkeit – als aufeinander abgestimmtes Paar oder bewusst unterschiedlich. Die Erscheinungsanimation ist dabei eine Einstellung der Schaltfläche „Nach oben“.

Live-Vorschau statt Raten

Die Einstellungsseite zeigt die Schaltflächen genau so, wie Sie sie gerade einrichten. Form wechseln, Farbe ziehen, Größe anpassen – die Vorschau zieht sofort mit. Kein Speichern, kein Wechsel in den Shop, kein Neuladen, kein Zurückklicken. Das ist der Unterschied zwischen einem Anlauf und fünf.

Form, Farbe und Position

Wählen Sie Kreis oder Abgerundetes Quadrat. Legen Sie Breite und Höhe fest, Hintergrund- und Symbolfarbe sowie den Abstand zu den Bildschirmrändern – rechter und unterer Rand für „Nach oben“, rechter und oberer Rand für „Nach unten scrollen“. Über den z-index bestimmen Sie, welche anderen Elemente die Schaltfläche überlagert. Das zählt, sobald ein Theme mit fixiertem Header, Cookie-Banner oder Chat-Widget um dieselbe Ecke konkurriert.

Bewegung nach Ihrem Geschmack

Die Schaltfläche „Nach oben“ hat eine Erscheinungsanimation dafür, wie sie beim Scrollen auftaucht – Einblenden, Drehen, Gegendrehen, Zoomen oder Keine, wenn sie einfach da sein soll. Die Scrollgeschwindigkeit, die Sie für jede Schaltfläche getrennt festlegen, ist ein Wert in Millisekunden, höher bedeutet langsamer und sanfter. So wird aus dem Weg nach oben ein kurzer Sprung oder ein ruhiges Gleiten.

Shop, Back Office oder beides

Zwei unabhängige Schalter. Zeigen Sie die Schaltflächen Ihren Kunden im Shop, Ihrem Team im Admin-Bereich oder an beiden Stellen. Produktlisten und lange Einstellungsseiten im Back Office profitieren von einer Schaltfläche „Nach oben“ genauso wie eine Kategorieseite.

Alles wird geprüft

Farben müssen echte Farben sein, Zahlenfelder ganze Zahlen ab null, Auswahlfelder eine der tatsächlich vorhandenen Optionen. Ungültige Eingaben werden beim Speichern abgewiesen, mit einer Meldung, die Feld und Wert benennt – "#GGG" is not a valid color statt eines stillen Fehlschlags oder einer kaputten Schaltfläche.

Kompatibilität

PrestaShop 1.7, 8 und 9, in acht Sprachen – Deutsch, Englisch, Französisch, Italienisch, Niederländisch, Polnisch, Spanisch und Türkisch. Die Schaltflächen stammen aus dem eigenen Template und Stylesheet des Moduls, die Icon-Schrift ist mitgeliefert statt von einem fremden CDN geladen. Es wird also nichts von außen angefordert, und die Schaltflächen erscheinen auch dann, wenn ein CDN nicht erreichbar ist.

Häufig gestellte Fragen

Kann ich auch nur die Schaltfläche „Nach oben“ nutzen?

Ja. Beide Schaltflächen werden unabhängig voneinander konfiguriert, Sie können also eine davon allein oder beide zusammen einsetzen.

Kollidiert sie mit meinem fixierten Header oder meinem Chat-Widget?

Genau dafür gibt es den z-index – höher setzen, damit die Schaltfläche über dem konkurrierenden Element liegt, niedriger, damit sie dahinter bleibt. Mit den Rändern schieben Sie sie ganz aus dem Weg.

Muss ich speichern, um das Ergebnis zu sehen?

Nein. Die Einstellungsseite zeigt beide Schaltflächen live, während Sie Form, Größe und Farben ändern.

Kann ich sie auch im Back Office anzeigen?

Ja, dafür gibt es einen eigenen Schalter. Lange Listen im Admin-Bereich profitieren davon genauso wie der Shop.

Wie mache ich das Scrollen langsamer und sanfter?

Erhöhen Sie den Wert für die Scrollgeschwindigkeit. Er steht in Millisekunden, ein höherer Wert bedeutet ein längeres, ruhigeres Gleiten.

Welche Formen stehen zur Auswahl?

Kreis und Abgerundetes Quadrat, jeweils mit eigener Breite und Höhe.

Wird etwas von einem externen Server geladen?

Nein. Die Icon-Schrift ist im Modul enthalten, es wird nichts von einem CDN abgerufen, und die Schaltflächen erscheinen selbst dann, wenn eines blockiert ist.