JavaScript

Jump to Anchor in JavaScript

While creating a web page or the site, there is a need to redirect the user to a specific page multiple times or to a particular page at some point. In addition to that, making the relevant content accessible to the end-user instantly. In such cases, jumping to anchor in JavaScript is helpful in saving the time and effort at the user’s end.

This blog will explain the approaches to jump to anchor in JavaScript.

How to Jump to Anchor in JavaScript?

Jumping to anchor in JavaScript can be achieved by using the following approaches:

  • getElementById()” method.
  • location.href” property.

Approach 1: Jump to Anchor in JavaScript Using the getElementById() Method

The “getElementById()” method accesses an element with the specified “id”. This method can be applied to fetch the anchor element and redirect to the specified site upon the button click.

Syntax

document.getElementById(element)

In the given syntax:

  • element” refers to the “id” to be fetched against the particular element.

Example
In this particular example, follow the stated steps:

<center><body>
<a href= "https://www.google.com/" id= "jump">Proceed to Google Site</h2>
<br><br>
<img src= "template1.png"><br>
<button onclick= "jumpAnchor()">Jump to Anchor</button>
</body></center>
<script type= "text/javascript">
function jumpAnchor(){
 var get = document.getElementById('jump')
}
</script>

In the above lines of code, perform the following steps:

  • Within the “<a>” tag, specify the stated site having an allocated “id” with the help of the “href” attribute.
  • Also, include an image and create a button having an attached “onclick” event invoking the function jumpAnchor().
  • In the JavaScript part of the code, access the “anchor” element by its “id” using the “document.getElementById()” method.
  • This will result in jumping to the anchor part upon the button click.

Output

From the above output, it can be observed that upon the button click, the page is redirected to the “URL” thereby performing the functionality of the “anchor” element.

Approach 2: Jump to Anchor in JavaScript Using the location.href Property

The “location.href” property returns the URL of the current page. This property can be utilized to access the passed “id” upon the function which will be accessed and jump to it.

Example
Let’s follow the below-given code-snippet:

<center><body>
<h2 id= "head1">This is an Image</h2>
<img src="template4.png"></img>
<h2 id= "head2">This is a paragraph</h2>
<p>JavaScript is a very effective programming language. It can be integrated with HTML to perform added functionalities for making an overall web page or the site attractive and responsive.
</p>
<a onmouseover= "jumpAnchor('head1');">Jump to First</a>
<br><br>
<a onmouseover= "jumpAnchor('head2');">Jump to Second</a>
</body></center>
  • Include a heading with a specific “id” and an image.
  • Similarly, in the next step, include another heading with a specific “id” and a paragraph.
  • Attach an “onmouseover” event to the “anchor” element invoking the function jumpAnchor() which contains the stated “id” as its parameter.
  • Similarly, repeat the above step for another “anchor” element with a function having the specified “id”.

Let’s continue to the JavaScript part of the code:

<script type="text/javascript">
function jumpAnchor(id){
 var get = location.href;              
 location.href = "#" + id;                  
}
</script>

In the above code-snippet:

  • Declare a function named “jumpAnchor()”. In its parameter, “id” refers to the id to jump to when the function will be accessed in the “anchor” element.
  • In its definition, the “location.href” property will be utilized to jump to the top(“#”) of the corresponding “id” discussed in the previous step.

Output

In the above output, it can be observed that upon hovering the mouse on “Jump to First”, the document is jumped to the top of the corresponding anchor.

Conclusion

The “getElementById()” method or the “location.href” property can be utilized to jump to an anchor and perform its functionalities in JavaScript. The former method redirects the document to the specified site upon the button click. The latter approach can be implemented to get the passed “id” upon the accessed function within the “anchor” element and jump to it. This write-up explained the approaches to jump to anchor in JavaScript.

About the author

Umar Hassan

I am a Front-End Web Developer. Being a technical author, I try to learn new things and adapt with them every day. I am passionate to write about evolving software tools and technologies and make it understandable for the end-user.