Passa ad ancoraggio in Javascript

Durante la creazione di una pagina Web o del sito, è necessario reindirizzare l'utente a una pagina specifica più volte o a una particolare pagina ad un certo punto. Oltre a ciò, rendere istantaneamente il contenuto pertinente accessibile all'utente finale. In tali casi, saltare all'ancora in JavaScript è utile per salvare il tempo e gli sforzi alla fine dell'utente.

Questo blog spiegherà gli approcci per saltare all'ancora in JavaScript.

Come saltare ad ancoraggio in JavaScript?

Saltare all'ancora in JavaScript può essere ottenuto usando i seguenti approcci:

• "getElementById ()" metodo.
• "posizione.Href" proprietà.

Approccio 1: passa all'ancoraggio in JavaScript usando il metodo getElementById ()

IL "getElementById ()"Il metodo accede a un elemento con" ID "specificato. Questo metodo può essere applicato per recuperare l'elemento di ancoraggio e reindirizzarsi al sito specificato sul clic del pulsante.

Sintassi

documento.getElementById (elemento)

Nella sintassi data:

• "elemento" si riferisce a "id"Essere recuperati contro l'elemento particolare.

Esempio
In questo particolare esempio, segui i passaggi dichiarati:

Procedi al sito di Google

Salta all'ancora

Nelle righe di codice sopra, eseguire i seguenti passaggi:

• All'interno del ""Tag, specificare il sito dichiarato che ha un assegnato"id"Con l'aiuto del"Href"Attributo.
• Inoltre, includi un'immagine e crea un pulsante con un allegato "al clic"Evento che invoca la funzione Jumpanchor ().
• Nella parte JavaScript del codice, accedi al "ancora"Elemento per il suo"id" usando il "documento.getElementById ()" metodo.
• Ciò comporterà il salto alla parte di ancoraggio sul clic del pulsante.

Produzione

Dall'output sopra, si può osservare che al clic del pulsante, la pagina viene reindirizzata al “URL"Eseguendo così la funzionalità di"ancora"Elemento.

Approccio 2: passa all'ancoraggio in JavaScript usando la posizione.Proprietà Href

IL "posizione.Href"La proprietà restituisce l'URL della pagina corrente. Questa proprietà può essere utilizzata per accedere al "ID" passato sulla funzione a cui si accede e salterà ad essa.

Esempio
Seguiamo il code-snippet di seguito:

Questa è un'immagine

Questo è un paragrafo

JavaScript è un linguaggio di programmazione molto efficace. Può essere integrato con HTML per eseguire funzionalità aggiunte per rendere attraente e reattiva una pagina web generale o il sito.

Salta per primo



Salta al secondo

• Includere un'intestazione con uno specifico "id"E un'immagine.
• Allo stesso modo, nel passaggio successivo, includi un'altra intestazione con una specifica "id"E un paragrafo.
• Attacca un "onmouseoverEvento "al"ancora"Elemento invocando la funzione Jumpchor () che contiene il dichiarato"id"Come suo parametro.
• Allo stesso modo, ripeti il ​​passaggio sopra per un altro "ancora"Elemento con una funzione che ha specificato"id".

Continuiamo alla parte JavaScript del codice:

In code-snippet sopra:

• Dichiarare una funzione denominata "Jumpanchor ()". Nel suo parametro, "id"Si riferisce all'ID per saltare quando la funzione sarà accessibile nel"ancora"Elemento.
• Nella sua definizione, il "posizione.Href"La proprietà verrà utilizzata per saltare in cima ("#") Del corrispondente"id"Discusso nel passaggio precedente.

Produzione

Nell'output di cui sopra, si può osservare che su mouse il mouse su "Salta per primo", Il documento viene saltato in cima all'ancoraggio corrispondente.

Conclusione

IL "getElementById ()Metodo o il "posizione.Href"La proprietà può essere utilizzata per saltare in un'ancora ed eseguire le sue funzionalità in JavaScript. Il precedente metodo reindirizza il documento al sito specificato sul clic del pulsante. Quest'ultimo approccio può essere implementato per far passare il passato "id"Sulla funzione accessibile all'interno del"ancora"Elemento e salta su di esso. Questo articolo ha spiegato gli approcci per saltare all'ancora in JavaScript.