Localanchors eller bogmærker, er links som får siden til at scrolle ned og stille sig et bestemt sted. Det er ganske let at lave, og kræver kun 2 ting: Et sted man skal lande, og et link.

Indholdsfortegnelse

• Hvorfor er localanchors smart?
• Sådan laver du et “landingssted” med id attribut (mest brugt)
• Sådan laver du et “landingssted” med <a> tag
• Sådan laver du et lokalt link
• Ekstra tip: Lav en scroll-to-top funktion
• Hvorfor er localanchors smart?
• Flere muligheder for lokale links

Hvorfor er localanchors smart?

Forestil dig en side med en del tekst på, måske lidt a la denne. Er det så ikke smart at kunne hoppe direkte ned til en bestemt situation? Måske du har nogle forskellige overskrifter, så det ville give mening at lave en indholdsfortegnelse som ovenfor (hint hint), eller måske du har en kontaktformular i bunden, som det er smart at kunne scrolle ned til hurtigt.

Måske har du en “onepage” – et website med kun 1 underside – selvom jeg oftest fraråder det. Her kan du via disse links, nemt og hurtigt hoppe ned til de forskellige sektioner.

Det er ganske let at lave – det kræver blot du angiver et “landingssted” samt opsætter det klikbare link.

Sådan laver du et “landingssted” med id attribut (mest brugt)

At bruge ID attributten er klart den foretrukne måde at gøre dette på, da det ikke altid er hensigtsmæssigt at bruge et <a> tag, som jo i virkeligheden er et link. Samtidig kan du linke til stort set alle typer indhold, som f.eks. overskrifter, div, section og meget mere.

Lad os tage udgangspunkt i en overskrift, af typen h2. Denne vil se således ud i HTML:

<h2>Min overskrift</h2>

I start tagget, altså <h2>, skal vi nu blot tilføje et id. Jeg vil anbefale du bruger en helt fast skabelon til dette. Selv skriver jeg gerne alt med små bogstaver, laver mellemrum til bindestreger samt undgår specialtegn, for at sikre at det altid virker. Der er ingen der ser dette ID, medmindre de kigger i din kode. Vores eksempel kunne altså skrives således:

<h2 id="min-overskrift">Min overskrift</h2>

Faktisk er det alt hvad der skal til for at lave “landingsstedet”, så nu skal vi blot lave linket.

Sådan laver du et “landingssted” med <a> tag

Det er også muligt at lave et “landingssted” med et link, som det egentlig var tiltænkt (som i gamle dage, fristes man til at sige).

Hvor et normalt link peger på et website eller lignende med attributten href=”https://wptutorials.dk/” – bruger man i stedet attributten name. Bruger vi eksemplet fra før med h2 overskriften, kunne det se således ud:

<a name="min-overskrift"><h2>Min overskrift</h2></a>

Som du kan se er koden ikke alene længere, men der er nu også et link som omkranser vores overskrift. Mange temaer er sat op til at give links en særlig farve, en understregning eller lignende, og dette vil oftest også være at se på din overskrift, ligesom musen vil skifte til en hånd når du peger på overskriften. Dette kan være ret misvisende, og det er bl.a. en af grundende til at jeg anbefaler at bruge ID attributten i stedet.

Men nu er vi klar til at lave selve linket.

Sådan laver du et lokalt link

Et normalt link ser således ud, med et begyndende a tag der indeholder en href attribut der fortæller hvor linket leder hen, en ankertekst altså den synlige klikbare del samt et afsluttende a tag.

<a href="https://wptutorials.dk/">WP Tutorials</a>

Måden et lokalt link bygges på, er sådan set det samme. Men i stedet for at skrive hele websitets adresse, kan vi blot linke til det lokale bogmærke eller “landingssted” som vi lige har lavet. I dette tilfælde vil linket se således ud:

<a href="#min-overskrift">WP Tutorials</a>

Her skal du bemærke at linket starter med tegnet #, samt at der skal stå præcis det samme. Hvis 1 tegn er forskelligt, vil linket ikke virke.

Det er også muligt at lave et link som springer til en specifik sektion på en anden side – det kræver dog at hele siden indtastes, f.eks. således:

<a href="https://wptutorials.dk/#min-overskrift">WP Tutorials</a>

Forventede du mere magi, så må jeg desværre skuffe dig – det er simpelthen så let som beskrevet.

Ekstra tip: Lav en scroll-to-top funktion

En ofte brugt mulighed indenfor localanchors, er muligheden for hurtigt at komme tilbage til toppen af siden. Det kan vi også klare relativt nemt – faktisk skal vi bare bruge href=”#top” eller href=”#”. Det kunne f.eks. se således ud:

<a href="#top">Gå til toppen</a>

Det kræver dog at #top ikke bruges andre steder.

Flere muligheder for lokale links

Dette er den basale udgave af localanchors. Det er selvfølgelig muligt at lave det meget smartere, hvor siden f.eks. visuelt scroller op og ned ad siden. Dette kræver dog yderligere JavaScript eller lignende for at opnå, og da vi alle gerne vil have hurtige gode websites, har jeg udeladt dette, da det kan sløve sitet. Vil du gerne se mere til dette, kan du f.eks. kigge på dette Smooth Scrolling script.