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
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:
<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:
<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:
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.
