Hopp til anker i JavaScript

Mens du oppretter en webside eller nettstedet, er det behov for å omdirigere brukeren til en bestemt side flere ganger eller til en bestemt side på et tidspunkt. I tillegg til det, gjør det relevante innholdet tilgjengelig for sluttbrukeren øyeblikkelig. I slike tilfeller er det nyttig å hoppe til anker i JavaScript for å spare tid og krefter på brukerens slutt.

Denne bloggen vil forklare tilnærmingene for å hoppe til anker i JavaScript.

Hvordan hoppe til anker i JavaScript?

Å hoppe til anker i JavaScript kan oppnås ved å bruke følgende tilnærminger:

• “getElementById ()”Metode.
• “plassering.href”Eiendom.

Tilnærming 1: Hopp til anker i JavaScript ved hjelp av getElementById () -metoden

“getElementById ()”Metode får tilgang til et element med den spesifiserte“ ID ”. Denne metoden kan brukes for å hente ankerelementet og omdirigere til det spesifiserte nettstedet på knappeklikk.

Syntaks

dokument.getElementById (element)

I den gitte syntaks:

• “element”Refererer til“id”Å bli hentet mot det aktuelle elementet.

Eksempel
I dette spesielle eksemplet, følg de uttalte trinnene:

Fortsett til Google Site

Hopp til anker

I kodelinjene ovenfor, utfør følgende trinn:

• Innen "”Tag, spesifiser det angitte nettstedet som har et tildelt“id”Ved hjelp av“href" Egenskap.
• Ta også med et bilde og lag en knapp som har tilknyttet "ved trykk”Hendelse som påkaller funksjonen Jumpanchor ().
• I JavaScript -delen av koden får du tilgang til “anker”Element av dets“id" bruker "dokument.getElementById ()”Metode.
• Dette vil resultere i å hoppe til ankerdelen på knappeklikk.

Produksjon

Fra output ovenfor kan det observeres at siden på knappen blir siden omdirigert til "URL”Dermed utfører funksjonaliteten til“anker”Element.

Tilnærming 2: Hopp til anker i JavaScript ved hjelp av stedet.Href -eiendom

“plassering.href”Eiendom returnerer nettadressen til den gjeldende siden. Denne egenskapen kan brukes til å få tilgang til den beståtte "ID" etter funksjonen som vil få tilgang til og hoppe til den.

Eksempel
La oss følge den undergitte kodesnippet:

Dette er et bilde

Dette er et avsnitt

JavaScript er et veldig effektivt programmeringsspråk. Det kan integreres med HTML for å utføre ekstra funksjoner for å lage en overordnet webside eller nettstedet attraktivt og responsivt.

Hopp til først



Hopp til andre

• Inkluderer en overskrift med en spesifikk “id”Og et bilde.
• Tilsvarende, i neste trinn, inkluderer en annen overskrift med en spesifikk “id”Og et avsnitt.
• Fest en “onmouseover”Arrangement til“anker”Element som påkaller funksjonen Jumpanchor () som inneholder det angitte“id”Som parameter.
• Tilsvarende, gjenta trinnet ovenfor for en annen “anker”Element med en funksjon som har det spesifiserte”id”.

La oss fortsette til JavaScript -delen av koden:

I ovennevnte kode-snippet:

• Erklære en funksjon som heter “Jumpanchor ()”. I sin parameter, “id”Henviser til ID å hoppe til når funksjonen vil nås i“anker”Element.
• I sin definisjon, "plassering.href”Eiendom vil bli brukt til å hoppe til toppen (“#”) Av tilsvarende”id”Diskutert i forrige trinn.

Produksjon

I ovennevnte utgang kan det observeres at ved å sveve musen på "Hopp til først”, Hoppet dokumentet til toppen av det tilsvarende ankeret.

Konklusjon

“getElementById ()”Metode eller“plassering.href”Eiendom kan brukes til å hoppe til et anker og utføre sine funksjonaliteter i JavaScript. Den tidligere metoden omdirigerer dokumentet til det spesifiserte nettstedet på knappeklikk. Den sistnevnte tilnærmingen kan implementeres for å få bestått “id”Etter den tilgjengelige funksjonen i“anker”Element og hopp til det. Denne oppskrivningen forklarte tilnærmingene til å hoppe til anker i JavaScript.