Hoe voeg je een scroll to top knop toe aan je WordPress website? Als je een website hebt met lange pagina’s met content kan het handig zijn om een scroll to top button op je website te maken, zodat je bezoekers makkelijk weer naar boven kunnen scrollen. Er zijn twee methodes om een scroll to top knop te maken met Elementor Pro, zonder dat je hiervoor code hoeft te gebruiken.
Het belangrijkste van een scroll to top is dat je deze op alle pagina’s zichtbaar wilt maken en dit niet per pagina opnieuw wilt instellen. Om dat in te stellen kun je óf gebruik maken van een popup, die je op alle pagina’s kunt tonen. Of je plaatst de scroll to top in de footer, die doorgaans ook op alle pagina’s is gepubliceerd. In dit artikel nemen we beide methodes door.
Voeg eerst CSS ID toe aan header
Je wilt dat bezoekers met de scroll to top straks direct naar boven navigeren. Daarvoor moet je een CSS ID toevoegen aan een sectie in de header. Heb je nog geen header ingesteld met Elementor? Doe dit dan eerst.
Het CSS ID voeg je bijvoorbeeld toe in de sectie waarin het menu staat (sommige sites, zoals die van ons) hebben meerdere secties in de header staan).
- Bewerk de sectie
- Ga naar het tabje ‘Geavanceerd’
- Vul bij CSS ID de term ‘top’ in
Overigens mag je hier ook een andere term voor gebruiken. Het maakt niet uit wat je hier kiest, zolang je deze term straks ook gebruikt voor het toevoegen van de url.
Methode 1: Scroll to top maken met een pop-up
Stap 1: Maak een nieuwe pop-up
Ga naar Templates –> Popups en voeg een nieuwe pop-up toe. De Elementor templates voor popups kun je wegklikken. Je gaat zelf de popup instellen.
Stap 2: de pop-up opmaken en instellen
- Sleep een button of icoon (afhankelijk van hoe je wilt dat de scroll to top eruit ziet) naar het canvas.
- Voer in het url vak van de button #top in. Daarmee zorg je ervoor dat de button naar boven scrollt, omdat je zojuist het CSS ID ‘Top’ hebt toegevoegd in de header.
- Maak vervolgens de button naar wens op.
De popup positioneren
Vervolgens ga je de popup goed positioneren. Over het algemeen vind je de scroll to top button onderaan in het venster van je scherm. Je voert de volgende aanpassingen door onder ‘Instellingen’ (klik hiervoor op het tandwieltje links onderin het Elementor panel)
Hoogte en breedte aanpassen
Pas de breedte van de popup aan zodat deze precies in de popup past. Zet height op ‘Fit to content’:
Positie aanpassen
Kies de positie waar je de scroll to top wilt plaatsen. In dit voorbeeld zetten we hem rechtsonderin.
Overlay en close button uitschakelen
Schakel de overlay en de close button uit. Deze heb je niet nodig. En voeg indien gewenst een entree animatie toe.
Verwijder de achtergrondkleur
Popups hebben standaard een achtergrondkleur. Deze kun je uitzetten. Hetzelfde geldt voor de schaduwrand van de popup. Je wilt tenslotte alleen de widget (button of icoon tonen).
- Ga naar het tabje ‘Stijl’ en klik op het kwastje op de achtergrondkleur aan te passen
- Klik op de kleurveld en maak de achtergrondkleur volledig transparant door deze helemaal naar links te slepen
- Reset de boxschaduw door op het reset icoontje te klikken
Stap 3: de pop-up publiceren
Klink op de knop ‘Publiceren’ en stel bij publicatiecondities in dat je de popup op de hele website wilt tonen.
Trigger instellen
Een scroll to top hoeft pas zichtbaar te worden zodra de header (de ‘top’) uit beeld is. Dit kun je instellen door bij Trigger de ‘on scroll’ in te schakelen. In het onderstaande voorbeeld wordt de widget pas getoond als de bezoeker op 20% van de pagina zit.
Klik vervolgens op save & close. De scroll to top is nu ingesteld. Test nog wel even of de scroll to top op tablet en mobiel ook goed staat.
Methode 2: Scroll to top maken in de footer
De tweede methode is maken van een scroll to top in de footer van je website.
Stap 1: maak een footer met Elementor
Ga naar het footer template in Theme Builder van Elementor. Heb je nog geen footer met Elementor gemaakt? Doe dit dan eerst. De scroll to top plaats je namelijk in het footer template, zodat deze straks op alle pagina’s terugkomt.
Stap 2: voeg een button of icoon toe aan de footer
De volgende stap is om een button of icoon toe te voegen in de footer. Deze ga je gebruiken om de scroll to top mee in te stellen. Plaats deze in een willekeurige kolom.
- Voeg een icoon toe (bijvoorbeeld een pijltje naar boven)
- Voer bij het url vak #top in
- Pas de stijl van de widget naar wens aan
Stap 3: scroll to top positioneren en vastzetten
Het icoon of de button staat nu nog gewoon in de footer, maar je wilt deze juist zwevend maken en / of altijd zichtbaar maken op je website.
- Selecteer de widget
- Ga naar het tabje Geavanceerd en dan naar ‘Positionering’
- Zet de breedte op ‘inline’.
- Zet de positie op ‘vast’ en bepaal vervolgens waar je de widget precies wilt plaatsen. In het voorbeeld hieronder is de scroll to top rechtsonderin gepositioneerd.
Tip: Zet de horizontale uitlijning ‘vw’. Dit staat voor View Width. Hiermee zorg je ervoor dat de scroll to top altijd op dezelfde plek staat, ongeacht de grootte van het scherm. Hetzelfde geldt voor de verticale uitlijning. Zet deze op VH (= View Height).
Stap 4: zichtbaarheid aanpassen
Tot slot stel je in wanneer je de scroll to top wilt tonen. Dit kun je doen via Geavanceerd -> bewegingseffecten.
- Zet de Scrolling Effects aan
- Stel de transparency in. In het onderstaande voorbeeld wordt de widget pas getoond als de bezoeker op 56% van de pagina zit. Het level staat op 10, zodat de button volledig onzichtbaar is als de bezoeker bovenaan de pagina is.
Sla vervolgens de footer op. De scroll to top is nu zichtbaar op alle pagina’s.
Welke methode is beter?
Ik maak zelf meestal gebruik van de tweede methode. Mijn collega moest mij er zelfs op wijzen dat je ook een scroll to top met een popup kunt maken. Een nadeel van werken met de popup is dat je niet kunt instellen dat de knop weer verdwijnt als iemand weer eenmaal bovenaan de pagina is. Je wilt juist dat de scroll to top alleen zichtbaar is als de bezoeker aan het scrollen is (en de top dus niet meer zichtbaar is). Dat is voor mij in ieder geval de reden om toch gebruik te blijven maken van de tweede methode.
