Når man opretter en one-page hjemmeside, benytter man ofte ankerlinks til at navigere mellem sektionerne på siden. Disse ankerlinks vises typisk i URL’en, hvilket kan resultere i, at URL’en ser rodet ud. For eksempel kan din URL ende med at se sådan ud: (dinhjemmeside.com/#om-os). Dette er ikke kun visuelt uattraktivt, men det kan også være upraktisk, især hvis du ønsker at dele en ren og professionel URL. Når nogen klikker på en sådan link, vil de blive sendt direkte til den specifikke sektion, hvilket ikke altid er ønskeligt.
Men fortvivl ikke! Med dette smarte lille trick kan du fjerne både ankerlinket og # fra URL’en. På den måde kan du holde dine URL’er pæne og ryddelige, samtidig med at du bevarer funktionaliteten af ankerlinks til navigation på din hjemmeside. Dette gør det muligt at dele en mere præsentabel URL, der stadig giver brugerne en glidende og problemfri oplevelse på din side.
For at oprette et ankertag på din hjemmeside, vil jeg bruge et eksempel med DIVI-temaet. Dette eksempel er let at tilpasse uanset hvilket tema eller hvilken page builder du bruger.
Jeg starter med at oprette et ankerlink i sektionen ved at navigere til: “Sektion Indstillinger > Avanceret > CSS ID og klasser > CSS ID”. Her giver jeg ankerlinket det ønskede navn, som skal fungere som identifikator for denne specifikke sektion.
Dernæst opretter jeg et menupunkt i navigationen. Jeg vælger at bruge et tilpasset link, hvor jeg indsætter et #-tegn efterfulgt af det navn, jeg gav sektionen i CSS ID-feltet. Dette sikrer, at når brugere klikker på menupunktet, vil de blive ført direkte til den pågældende sektion på siden.
Indtil videre har vi etableret grundstrukturen. For at optimere funktionaliteten og æstetikken af disse ankerlinks, skal vi nu implementere et lille stykke kode. Dette vil hjælpe med at fjerne ankerlinket og #-tegnet fra URL’en, hvilket både forbedrer udseendet og øger brugervenligheden af din hjemmeside. Koden vil sikre, at navigationen forbliver glidende og intuitiv uden at forringe den visuelle appel af dine URL’er.
Denne metode giver dig en ren og professionel URL, samtidig med at du bevarer den praktiske navigationsfunktion, hvilket skaber en bedre oplevelse for dine besøgende.
<script>
// when the DOM is ready
$(document).ready(function() {
// get the anchor link buttons
const menuBtn = $('.hack15-menu-button');
// when each button is clicked
menuBtn.click(()=>{
// set a short timeout before taking action
// so as to allow hash to be set
setTimeout(()=>{
// call removeHash function after set timeout
removeHash();
}, 5); // 5 millisecond timeout in this case
});
// removeHash function
// uses HTML5 history API to manipulate the location bar
function removeHash(){
history.replaceState('', document.title, window.location.origin + window.location.pathname + window.location.search);
}
});
</script>
Du kan tilføje denne kode til temaet ved at indsætte den i “Divi > Temaindstillinger > Integration > Add code to the head of your blog”. Du indsætter koden efter alt andet, der allerede er der.
Når du ændrer koden på din hjemmeside som i dette tilfælde, skal du være opmærksom på, at der er en risiko for, at din side ikke fungerer korrekt. Derfor er det altid vigtigt at notere, hvilke ændringer du foretager og hvor du foretager dem. På den måde kan du hurtigt kan revertere dem, hvis noget går galt. Det bedste er at teste ændringerne først i et testmiljø.
Funktionen som beskrevet her kan ses på https://malou705.com/
Seneste Kommentarer