Skok do kotwicy w JavaScript

Podczas tworzenia strony internetowej lub witryny istnieje potrzeba przekierowania użytkownika na określoną stronę wiele razy lub na określoną stronę. Oprócz tego, że odpowiednia treść dostępna dla użytkownika końcowego natychmiast. W takich przypadkach skok do kotwicy w JavaScript jest pomocny w oszczędzaniu czasu i wysiłku na końcu użytkownika.

Ten blog wyjaśni podejście do skoku do zakotwiczenia w JavaScript.

Jak skakać do kotwicy w JavaScript?

Skakanie do kotwicy w JavaScript można osiągnąć, stosując następujące podejścia:

• "getElementById ()" metoda.
• "Lokalizacja.Href" nieruchomość.

Podejście 1: Skocz do kotwicy w JavaScript za pomocą metody getElementById ()

„„getElementById ()„Metoda uzyskuje dostęp do elementu z określonym„ id ”. Tę metodę można zastosować w celu pobrania elementu zakotwiczenia i przekierowania do określonej witryny na przycisku.

Składnia

dokument.getElementById (element)

W podanej składni:

• "element" odnosi się do "ID„Zostanie sprowadzony wbrew konkretnemu elementowi.

Przykład
W tym konkretnym przykładzie wykonaj podane kroki:

Przejdź do strony Google

Przeskocz do kotwicy

W powyższych wierszach kodu wykonaj następujące kroki:

• W „„”Tag, określ podaną witrynę o przydzielonym„ID”Z pomocą„Href" atrybut.
• Dołącz także obraz i utwórz przycisk z załączonym „na kliknięcie„Wydarzenie wywołujące funkcję Jumpanchor ().
• W części kodu JavaScript uzyskaj dostęp do „kotwica”Element po„ID" używając "dokument.getElementById ()" metoda.
• Spowoduje to skok do części kotwicy na przycisku kliknięcia.

Wyjście

Z powyższego wyjścia można zauważyć, że po kliknięciu przycisku strona jest przekierowana do „URL„W ten sposób wykonując funkcjonalność„kotwica" element.

Podejście 2: Skocz do Anchor in JavaScript za pomocą lokalizacji.właściwość HREF

„„Lokalizacja.Href„Własność zwraca adres URL bieżącej strony. Ta właściwość można wykorzystać do dostępu do przekazanej „id” na funkcji, do której zostanie dostępny i skoczyć do niej.

Przykład
Śledźmy poniżej podobne kod-snippet:

To jest obraz

To jest akapit

JavaScript to bardzo skuteczny język programowania. Można go zintegrować z HTML w celu wykonywania dodatkowych funkcji w tworzeniu ogólnej strony internetowej lub witryny atrakcyjnej i responsywnej.

Przeskocz do pierwszego



Przeskocz na drugie miejsce

• Dołącz nagłówek z konkretnym „ID”I obraz.
• Podobnie, w następnym kroku, zawieraj kolejny nagłówek z konkretnym „ID”I akapit.
• Dołącz „onmouseover„Wydarzenie do„kotwica„Element wywołujący funkcję Jumpanchor (), który zawiera podane„ID”Jako jego parametr.
• Podobnie powtórz powyższy krok dla innego „kotwica”Element z funkcją o określonej„ID".

Kontynuujmy do części kodu JavaScript:

W powyższym kodzie-snippet:

• Deklaruj funkcję o nazwie „Jumpanchor ()". W swoim parametrze „ID”Odnosi się do identyfikatora, aby przeskakiwać, kiedy funkcja zostanie dostępna w„kotwica" element.
• W swojej definicji „Lokalizacja.Href„Nieruchomość zostanie wykorzystana do skoku na szczyt (”#”) Z odpowiedniego„ID”Omówiono w poprzednim kroku.

Wyjście

Na powyższej mocy można zaobserwować, że po unoszeniu myszy na „Przeskocz do pierwszego”, Dokument jest przeskoczony na górę odpowiedniej kotwicy.

Wniosek

„„getElementById ()”Metoda lub„Lokalizacja.Href„Własność można wykorzystać do skakania do kotwicy i wykonywania jej funkcji w JavaScript. Poprzednia metoda przekierowuje dokument do określonej witryny po kliknięciu przycisku. To ostatnie podejście można wdrożyć, aby uzyskać przekazanie ”ID”Po dostępnej funkcji w„ „kotwica„Element i skocz do niego. Ten zapis wyjaśnił podejście do skoku do kotwicy w JavaScript.