Magento2 back to top
Back to Top til Magento 2
Lange kategorisider og produktsider tvinger kunden til at scrolle langt tilbage for at nå menuen. Back to Top løser det med en diskret knap, der kun er der, når der er brug for den.
Sådan virker den
Knappen er skjult, indtil kunden har scrollet forbi ét skærmbillede, og fader derefter blødt ind. Scroller kunden tilbage til toppen, forsvinder den igen. Et klik ruller siden roligt op — ingen hop, ingen # i adressefeltet.
Grænsen er ét skærmbillede frem for et fast antal pixels. Det betyder, at knappen opfører sig ens på mobil, tablet og desktop, og at den tilpasser sig automatisk, når telefonen vendes.
Design uden billedfiler
Ikonet er indbygget som SVG, så du skal hverken tegne, eksportere eller uploade et billede. Farven styres direkte fra administrationen — både i hvile og ved museover.
Det betyder også, at du ikke skal lave nye ikonfiler, hvis butikkens farver ændrer sig, og at knappen forbliver knivskarp på alle skærme uanset størrelse.
Du vælger selv, om knappen skal være rund eller firkantet, om den skal have ramme, og hvor gennemsigtig baggrunden skal være. En let gennemsigtig baggrund lader indholdet skinne igennem, mens ikonet forbliver skarpt.
Indstillinger
Placering
| Indstilling | Beskrivelse |
|---|---|
| Placering | Nederst til højre eller nederst til venstre |
| Afstand fra bund | Afstand til underkanten |
| Afstand fra side | Afstand til nærmeste sidekant |
Udseende
| Indstilling | Beskrivelse |
|---|---|
| Størrelse | Knappens diameter |
| Form | Rund eller firkantet |
| Baggrundsfarve | Farve i hvile |
| Baggrundsgennemsigtighed | Fra helt gennemsigtig til helt dækkende |
| Baggrundsfarve ved hover | Farve når musen er over knappen |
| Baggrundsgennemsigtighed ved hover | Gennemsigtighed ved museover |
| Ikonfarve | Pilens farve i hvile |
| Ikonfarve ved hover | Pilens farve ved museover |
| Rammetykkelse | 0 for ingen ramme |
| Rammefarve | Rammens farve i hvile |
| Rammefarve ved hover | Rammens farve ved museover |
| Overgangstid | Hastighed på fade og farveskift |
Alle indstillinger kan sættes pr. website og pr. store view, så en dansk og en tysk butik kan have hver sin placering og sine egne farver.
Teknisk- Magento 2.4.x, PHP 8.0 til 8.4
- Virker med både Breeze og standardtemaer som Luma
- Én lille JavaScript-fil uden afhængigheder — hverken jQuery, RequireJS eller eksterne biblioteker
- Ingen billedfiler og ingen ekstra hentninger — ikonet er en del af siden
- Scroll-håndtering er optimeret, så den ikke belaster ydelsen på mobil
- Skjules automatisk i kurv og checkout, så den ikke forstyrrer købsflowet
- Respekterer browserens indstilling for reduceret bevægelse
- Dansk og engelsk oversættelse følger med
- Installeres via Composer