WPNews.nl

HTML Anker link – scroll naar doel

De html anker-link functie komt heel veel voor, maar wordt vaak niet goed begrepen. Een anker heet in de Engels taal een ‘anchor’, maar wordt ook wel een ‘jump link’ genoemd. Dat is ook wat de anker-link (jump link) doet: het ‘springt’ naar een andere plek toe. De anker-link functie komt vanuit HTML. De uitleg hier is toegespitst op WordPress, zodat je geen code hoeft te gebruiken.

Wat is een anker?

Uitleg anker

Een anker is letterlijk een ‘anker’ (net als bij een schip dat zich ‘verankerd heeft’ op een vaste plek) op een pagina waar vanaf een andere plek (knop of gewone link) naar verwezen kan worden. Als de bezoeker klikt op die knop of link, zorg de browser dat het deel van de pagina van (onder)het anker getoond wordt. We hebben een voorbeeld gemaakt.
  • Er is een anker gecreëerd wat lager op deze pagina (voorbeeld-anker).
  • Een anker link is geplaatst in de knop hierboven (#voorbeeld-anker).
  • Probeer het maar uit (klik op de knop).

Hoe creëer je een anker?

  • Waar wil je naar verwijzen? (Dus het doel).
  • Wat wil je gebruiken als trigger. Nagenoeg elk element op je pagina kun je gebruiken als trigger: een tekst, een kop, een afbeelding of een video.

Plaats een anker bij het doel

Anker-html
Klik op bewerken en zoekt het blok of element op dat het doel is. Dat kan een healing zijn, een illustratie of een download.
Elk blok van een goede builder heeft ergens een veld bij geavanceerd of opties dat heet HTML-anker.
In dat veld tik je de naam van jouw anker. In dit voorbeeld gebruiken we voorbeeld-anker.

Plaats een HTML #anker bij de trigger

Anker-bij-trigger-als-link
De trigger kan zijn een knop, een woord of een illustratie.
Het anker plaats je op exact dezelfde manier als waarop je een gewone URL link plaatst. Alleen is het nu geen externe link of pagina link die je plaatst, maar een anker.
In het veld waar je de link plaatst, tik je de naam van het anker met # (hashtag) er voor, zonder spatie. In dit voorbeeld gebruiken we #voorbeeld-anker.

In dit voorbeeld is de knop bovenaan de trigger en het blauwe code blok onderaan het doel. Belangrijk: bij het doel gebruik je dus alleen het anker zonder # en bij de trigger met #.

Dit is het doel waar de anker knop naar verwijst. Dit had bijvoorbeeld ook een afbeelding of een download kunnen zijn. Bij HTML anker is dit geplaats: voorbeeld-anker. De knop bevat de link met #voorbeeld-anker.

Anker toepassingen

Knoppen als menu

Zoals je zag op deze pagina kun je een knop laten verwijzen naar een tekst of afbeelding elders op de pagina. Je kunt echter ook een submenu creëren (meerdere knoppen naast elkaar) die elk naar een specifiek deel van de webpagina verwijderen middels ankers.

Anker link naar een andere pagina

Je kunt een anker ook combineren met een URL van een andere pagina.

Het doel-anker plaats je net als in het voorbeeld. De trigger feitelijk ook, maar je zet niet alleen # ervoor, maar de hele URL.
Dan wordt het: https://naam-van-de-pagina/#voorbeeld-anker
De makkelijkste manier om de exacte URL van pagina + anker op te zoeken, is door de pagina te openen alsof je een bezoeker bent en op de trigger te klikken. Vervolgens staat de complete URL in je browser. Die kun je met copy/paste elders toepassen bij een trigger op een ander pagina. Als iemand dan op die trigger klikt, gaat de browser niet alleen naar de juiste pagina, maar scrolt meteen door naar de juiste plek op die pagina; het anker. Dit is handig als je een pagina link plaatst, en meteen iemands aandacht ergens op wilt vestigen.

Translate »