What is window.location.hash in JavaScript?

Overview

The window.location.hash returns a string that contains a # along with the fragment identifier of the URL. The fragment identifier of the URL starts with a # followed by an identifier that uniquely identifies a section in an HTML document.

In this Answer, we will understand the working of the location.hash property of the window object. The following are the two main uses of this property:

1. To return the anchor of the URL.
2. To set the anchor of the URL in an HTML <a> .

Syntax

The syntax that follows from the two uses is the one below:

Parameters

anchorname: This is a string that specifies the anchor of an URL.

Return value

The window.location.hash property returns a string which is the anchor of the URL.

Example 1

The code example below illustrates the first use of the property:

Explanation

The explanation for the code that is present in the HTML file of the code widget above is as follows:

• Line 5: In this line, we have an <a> tag with an href attribute encapsulates the <h2> tag. This href attribute is what we want to retrieve using the location.hash property.
• Line 6: In this line, we have the <p> tag that acts as a container that will dynamically render the fragment identifier of the URL when the user clicks on the <button> present on line 8.
• Line 7: The <button> tag listens for the onclick event and executes the function in the Javascript tab in the code example above.

The description of the code in the JavaScript tab is as follows:

• Lines 2–4: Here, we use DOM and its property document.getElementById() to fetch respective HTML elements.
• Lines 5–6: This is where we replace the text of the <p> tag in the HTML document using the element innerTextinnerText is used to set or return the text of an HTML element property. We've also made use of the location.hash property to assign the hash string returned by the property and render it accordingly in the <p> tag.

Note: To read more on the innerText property, please refer to this link.

Example 2

Let's look at the second use of the location.hash property and look at its working with the help of a code example:

Explanation

The explanation for the HTML code is as follows:

• Line 5: We use a <button> tag linked to the changeAnchor() method defined in the JavaScript tab. This method is explained later in the Answer.
• Line 6: This line contains a <a> tag with the href attribute manipulated using the location.hash property. It is first set to the value currenthash and is changed to newhash when the onclick event is triggered.
• Lines 8–11: This contains <div> elements that are incorporated to demonstrate the second primary use of location.hash property.

The code in the JavaScript file has the changeAnchor() function which encapsulates the code described below:

• Line 2: We fetch the <button> element using DOM and change its text dynamically using the innerText property when the user clicks on the <button> present on line 5 of the HTML document.
• Line 3: We then make use of the location.hash property to set the href attribute of the <a> tag, as specified on line 6 of the HTML file.