Smart Scroll Buttons - Terug naar boven en Scroll naar beneden met live voorbeeld

Lange pagina's hebben een uitweg nodig

Een categorie met zestig producten, een filterkolom, een lange CMS-pagina, een lijst in de back office — de bezoeker scrollt, vindt wat hij zocht en moet daarna weer helemaal terug omhoog. Kleine wrijving, maar op elke lange pagina opnieuw, en één knop lost het op. Deze module geeft u er twee.

Twee knoppen, elk apart in te stellen

• Terug naar boven verschijnt zodra een bezoeker naar beneden heeft gescrolld. Een klik brengt de pagina soepel terug omhoog.
• Scroll naar beneden blijft zichtbaar zolang er nog pagina onder zit. Een klik springt meteen naar het einde — handig bij lange overzichten en bij pagina's waar juist onderaan staat wat mensen zoeken, zoals een formulier of een contactblok.

Het is niet één instelling die twee keer wordt toegepast. Elke knop heeft een eigen vorm, breedte, hoogte, achtergrondkleur, pictogramkleur, marges, z-index en scrolsnelheid, zodat u er een bij elkaar passend paar van maakt of ze juist bewust laat verschillen. De verschijningsanimatie is overigens een instelling van de knop Terug naar boven.

Een live voorbeeld in plaats van gokwerk

De instellingenpagina toont de knoppen terwijl u ze samenstelt. Verander de vorm, sleep de kleur, pas de grootte aan en het voorbeeld verandert mee — geen opslaan, naar de winkel schakelen, verversen en weer terugkomen. Dat is het verschil tussen het uiterlijk in één keer goed krijgen en pas bij de vijfde poging.

Vorm, kleur en positie

Kies Cirkel of Afgerond vierkant. Stel de breedte en hoogte in, de achtergrond- en pictogramkleur en de afstand tot de schermranden — rechtermarge plus ondermarge voor Terug naar boven, rechtermarge plus bovenmarge voor Scroll naar beneden. Met de z-index bepaalt u boven welke andere elementen de knop komt te liggen, en dat telt zodra een thema een vaste header, een cookiemelding of een chatvenster in dezelfde hoek heeft staan.

Beweging die u zelf kiest

De knop Terug naar boven heeft een verschijningsanimatie die bepaalt hoe hij in beeld komt terwijl de bezoeker scrollt: Vervagen, Draaien, Omgekeerd draaien, Inzoomen, of Geen als u wilt dat hij zonder meer verschijnt. De scrolsnelheid, die u per knop apart instelt, is een getal in milliseconden — hoger is langzamer en soepeler — zodat de weg terug naar boven een korte sprong of een rustige glijvlucht wordt.

Winkel, back office of allebei

Twee onafhankelijke schakelaars. Toon de knoppen aan klanten in de winkel, toon ze aan uw team in het beheerpaneel, of allebei. Productlijsten en lange instellingenpagina's in de back office hebben net zoveel baat bij een knop Terug naar boven als een categoriepagina.

Alles wordt gecontroleerd

Kleuren moeten echte kleuren zijn, numerieke velden hele getallen van nul of hoger, en keuzevelden een van de bestaande opties. Wat niet klopt wordt bij het opslaan geweigerd, met een melding die het veld en de waarde noemt — "#GGG" is not a valid color in plaats van een stille fout of een kapotte knop.

Compatibiliteit

PrestaShop 1.7, 8 en 9, in acht talen: Nederlands, Duits, Engels, Frans, Italiaans, Pools, Spaans en Turks. De knoppen komen uit de eigen template en stylesheet van de module, en het pictogramlettertype wordt meegeleverd in plaats van opgehaald bij een externe CDN — er gaat dus geen enkel extern verzoek uit en de knoppen verschijnen ook als een CDN onbereikbaar is.

Veelgestelde vragen

Kan ik alleen de knop Terug naar boven gebruiken?

Ja. Beide knoppen worden los van elkaar ingesteld, dus u zet er een aan of allebei.

Botst hij met mijn vaste header of chatvenster?

Daar is de z-index voor — verhoog de waarde om boven het concurrerende element te blijven, of verlaag hem om erachter te vallen. Met de marges schuift u de knop desnoods helemaal uit de weg.

Moet ik eerst opslaan om te zien hoe het eruitziet?

Nee. De instellingenpagina toont beide knoppen live terwijl u vorm, grootte en kleuren wijzigt.

Kan ik ze ook in de back office tonen?

Ja, dat is een aparte schakelaar. Lange lijsten in het beheerpaneel profiteren er net zo goed van als de winkel.

Hoe maak ik het scrollen langzamer en soepeler?

Verhoog de waarde voor scrolsnelheid — die staat in milliseconden, dus een hoger getal betekent een langere, rustigere beweging.

Welke vormen zijn er?

Cirkel en Afgerond vierkant, elk met een eigen breedte en hoogte.

Laadt de module iets van een externe server?

Nee. Het pictogramlettertype zit in de module, dus er wordt niets bij een CDN opgehaald en de knoppen verschijnen ook als die geblokkeerd wordt.