Jump links – interne links til lettere navigation

Af | maj 19, 2017

Istedet for at tilbyde dine besøgende en endeløs scrolling op og ned, af lange sider. Vil et tilbud om “Jump” links, være en alternativ måde at komme rundt på lange sider.

Jump links

I dag er de besøgende blevet “dovne”, så side “Jumps” er steget meget i popularitet. Så undgå at “Ungdommen” syntes dine sider er “Trælse” og implementer “Jump” links, hvor du kan!

Sektions navne på samme side

Den gamle måde, at udføre disse på:

Egentligt er side “Jumps” blot links, de bruger det samme <a> element som alle andre links, men disse “Jump” links vil lede til et specielt sted på siden og ikke blot til selve siden. Dette gøres ved at navngive forskellige sektioner af din side.

Side “Jumps” gøres ved at bruge name attribute af elementet.

Lad os lave et link der fører dig fra bunden af siden til toppen af siden.

Tilføj følgende, lige efter dit åbende <body> tag

<a name="top"></a>

Der behøver ikke være nogen tekst mellem åben og lukke tagget ><

Derefter indsætter du følgende link, hvor du ønsker det:

<a href="#top">Tilbage til toppen af siden</a>

Bemærk hash mark (#). der fortæller browseren, at det er en sektion af samme side der kigges efter, og ikke en seperat side eller folder. Så linket skla blot gå til den sektion du indsatte tidligere. Du kan navngive det præcist som du vil, men “top” holder det simpelt og du vil let kunne huske, hvad du linkede til. HUSK at # skal i href og ikke i name attributen.

Linke til sektioner på andre sider

Skulle du ønske at linke til en speciel sektion af en anden side, gøres det på samme måde. Fårst indsætter du din name attribute, der hvor du vil føres hen:

<a name="hvilket-som-helst-navn"></a>

Derefter linket til ovenstående, hvor du ønsker det:

<a href="http://din-side.dk/din-interne-side#hvilket-som-helst-navn">Jump til hvilket som helst navn</a>

Hvad du skal bruge det til

Favoritten til brugen af dette, er som regelt tilbage til toppen fra bunden af siden. Da mange sider stadigt mister deres top navigation, efter en del nedscrolling. Så kan du på denne måde lede dem tilbage til den oprindelige navigation.

En anden populær brug af dette, er evt. at lave en liste i toppen der linker til sektioner længere nede på siden, hvilket igen øger hastigheden, hvormed den besøgende kan finde sin information hurtigt.

En lidt mere moderne måde, at udføre jump links på:

Navngive sektioner med id attribute

En lidt mere moderne måde at lave disse på er at udnytte id attributen, der kan tilføjes et hvilket som helst HTML element på siden, hvilket igen betyder at du ikke længere skal fylde dine sider med tomme a elementer, men istedet tildele en unik id til et eksisterende element.

Eksempel, her er den gamle måde:

<a name="top"></a>
<h2>Sektions navne på samme side</h2>

Istedet for at tilføje dette overflødige a element, kan du nu blot tilføje en id attribute til et eksisterende element

<h2 id="top">Sektions navne på samme side</h2>

Og linket fra bunden vil stadigt være:

<a href="#top">Tilbage til toppen af siden</a>

Tilbage til toppen