Sauter à l'ancre en javascript

Lors de la création d'une page Web ou du site, il est nécessaire de rediriger l'utilisateur vers une page spécifique plusieurs fois ou vers une page particulière à un moment donné. En plus de cela, rendre le contenu pertinent accessible à l'utilisateur final instantanément. Dans de tels cas, sauter à l'ancre en JavaScript est utile pour gagner du temps et des efforts à la fin de l'utilisateur.

Ce blog expliquera les approches pour sauter à l'ancrage en javascript.

Comment sauter à l'ancre en javascript?

Le saut à l'ancre en JavaScript peut être réalisé en utilisant les approches suivantes:

• "getElementByid ()" méthode.
• "emplacement.href" propriété.

Approche 1: Sautez à l'ancrage en JavaScript en utilisant la méthode GetElementById ()

Le "getElementByid ()»La méthode accède à un élément avec« ID »spécifié. Cette méthode peut être appliquée pour récupérer l'élément d'ancrage et rediriger vers le site spécifié sur le bouton cliquer.

Syntaxe

document.GetElementByid (élément)

Dans la syntaxe donnée:

• "élément" se réfère à la "identifiant«À récupérer contre l'élément particulier.

Exemple
Dans cet exemple particulier, suivez les étapes déclarées:

Passez au site Google

Sauter à l'ancre

Dans les lignes de code ci-dessus, effectuez les étapes suivantes:

• Dans le ««Tag, spécifiez le site indiqué ayant un alloué«identifiant"Avec l'aide du"href" attribut.
• Incluez également une image et créez un bouton ayant un joint «sur clic”Événement invoquant la fonction Jumpanchor ().
• Dans la partie JavaScript du code, accédez au «ancre«Élément par son«identifiant" en utilisant le "document.getElementByid ()" méthode.
• Cela entraînera un saut à la partie ancre sur le bouton cliquer.

Sortir

À partir de la sortie ci-dessus, on peut observer que sur le bouton CLIC, la page est redirigé vers le "URL"Effectuer ainsi la fonctionnalité du"ancre" élément.

Approche 2: sautez à l'ancre en JavaScript en utilisant l'emplacement.propriété HREF

Le "emplacement.href»La propriété renvoie l'URL de la page actuelle. Cette propriété peut être utilisée pour accéder à l'adoption «ID» sur la fonction qui sera accessible et à y accéder.

Exemple
Suivons le code-Snippet ci-dessous:

C'est une image

C'est un paragraphe

JavaScript est un langage de programmation très efficace. Il peut être intégré à HTML pour effectuer des fonctionnalités ajoutées pour créer une page Web globale ou le site attrayant et réactif.

Sautez d'abord



Sauter au deuxième

• Incluez une rubrique avec un spécifique "identifiant»Et une image.
• De même, à l'étape suivante, inclure une autre rubrique avec un spécifique «identifiant»Et un paragraphe.
• Attacher un «onduir«Événement au«ancre«Élément invoquant la fonction Jumpanchor () qui contient le déclaré«identifiant"Comme paramètre.
• De même, répétez l'étape ci-dessus pour un autre "ancre«Élément avec une fonction ayant le«identifiant".

Continuons à la partie javascript du code:

Dans le code-snippet ci-dessus:

• Déclarer une fonction nommée «Jumpanchor ()". Dans son paramètre, "identifiant»Fait référence à l'ID pour sauter lorsque la fonction sera accessible dans le«ancre" élément.
• Dans sa définition, le «emplacement.href"La propriété sera utilisée pour sauter au sommet ("#") Du correspondant"identifiant»Discuté à l'étape précédente.

Sortir

Dans la sortie ci-dessus, on peut observer qu'en planant la souris sur «Sautez d'abord», Le document est sauté en haut de l'ancre correspondante.

Conclusion

Le "getElementByid ()«Méthode ou le«emplacement.href«La propriété peut être utilisée pour passer à une ancre et exécuter ses fonctionnalités en JavaScript. L'ancienne méthode redirige le document vers le site spécifié sur le bouton cliquer. Cette dernière approche peut être mise en œuvre pour obtenir le passage "identifiant"Sur la fonction accessible dans le"ancre”Element et sautez-y. Cet article a expliqué les approches pour passer à l'ancre en javascript.