Link laten scrollen naar specifiek onderdeel op de pagina (anchor link)

Je hebt ze vast wel eens gezien: dat je op een link klikt en je niet naar een andere pagina gaat, maar dat je door de klik in een vloeiende beweging scrollt naar een andere plek op diezelfde pagina.

Of: dat je wel naar een andere pagina gaat, maar direct naar een specifiek onderdeel óp die pagina.

Dit noem je een anchor link. Je ziet dan achter een URL een # met een woord erachter staan. Zoals:

jouwdomein.nl/dienst#anchorlink

In de templates zit die standaard in de CTA-knop op de homepagina (‘Naar mijn aanbod’), welke dan scrollt naar je aanbod-blok.

Wil je dit principe ook op een andere plek gebruiken? Zo doe je dat:

1. Ga naar de container van het onderdeel waar je naartoe wilt laten scrollen.
2. Klik op het tabje Geavanceerd
3. Vul bij CSS ID iets relevants in wat voor jou relevant is, zonder spaties of speciale tekens. In dit voorbeeld gaan we een knop bovenaan een aanbod-pagina laten scrollen naar dit blok met praktische info en CTA om een kennismakingsgesprek te plannen. In die knop bovenaan staat straks ‘Dit wil ik!’, dus ik vul hier achter CSS ID ditwilik in. Maar het maakt verder niet uit wat je hier invult, als het maar iets unieks en herkenbaars is voor jouzelf.

4. Ga nu naar de knop die je wilt laten scrollen naar het blok dat we net hebben ingesteld
5. Voor links binnen dezelfde pagina: bij Link plaats je dit keer geen link zoals je gewend bent, maar het woord dat je bij stap 3 hebt gebruikt met een # ervoor. Dus in dit voorbeeld #ditwilik.
6. Voor links vanaf een andere pagina: vul dan bij link de link van de pagina in, met #ditwilik erachter. Zoals https://klanten.digitalepootjes.nl/jouwsite/aanbodpagina#ditwilik

6. Klik nu op de knop om hem te testen. Als het goed is scrolt hij nu netjes naar het onderdeel zoals je bedoelde.