How To Hide Hash Id In The URL Bar Using JavaScript

Question

I want to hide the complete id or hash from the URL for one of mine project but I can't find any solution after searching on internet. actually the problem is related to scroll to div. I have written a JS code which is doing its work in single page application without showing id in URL bar but the problem is that I want to hyperlink a specific div or section of my homepage with another page. It means when a user clicks on that link from another page the user should be redirected or scroll to that particular div after loading the homepage and here JavaScript failed.

WITHOUT JS -

(For example: MY LINK - https://website.com#div-2)

"It's working fine" but the problem is the div id "#div-2" is also visible in the end of the URL and I want to hide it "#div-2". Is there any working solution available for this?

html {
  scroll-behavior: smooth;
}

<a href="#btn-1">BTN 1</a><br>
<a href="#btn-2">BTN 2</a><br>
<a href="#btn-3">BTN 3</a>


<div id="btn-1" style="background-color: red; width:100%; height:600px;"></div>
<div id="btn-2" style="background-color: green; width:100%; height:600px;"></div>
<div id="btn-3" style="background-color: blue; width:100%; height:600px;"></div>

I don't think this is possible without Javascript because whenever a client wants to use a Fragment Identifier to tell their browser to scroll to a specific part of the request resource, the #elementId must be present in URL so the browser knows what element to scroll to. Since there is no way to manipulate the URL via HTML or CSS your only other option would be to use a JS solution and change the URL after the browser scrolled to the element. — staticBanter
– staticBanter, Commented Aug 13, 2022 at 18:35

stckvrw · Accepted Answer · 2022-08-14 09:52:50Z

2

I don't think it's possible WITHOUT JS. So in JS you can use window.history.pushState():

let links = document.querySelectorAll('a[href*="#btn-"]');
links.forEach(link => {
    link.addEventListener('click', () => {
        setTimeout(function() {
            window.history.pushState(document.html, document.title, document.URL.split('#')[0]);
        }, 1);
    });
});

To do the same when page loading:

window.addEventListener('load', () => {
    window.history.pushState(document.html, document.title, document.URL.split('#')[0]);
});

edited Aug 14, 2022 at 9:52

answered Aug 13, 2022 at 18:06

stckvrw

1,82923 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Anuj Thapa Over a year ago

Yes Sir it's working but I'm still confused that how to automatically remove the hash from the end of the URL after new page load. Means if I send you a link (e.g., example.com#div-4 ) and you open this link then it will automatically scroll your browser window to that particular div but at the same time I also want to remove the "#div-4" from your browser URL.

stckvrw Over a year ago

@AnujThapa you may also want to accept my answer

ddd · Accepted Answer · 2024-03-10 23:09:06Z

1

@stckvrw

How about listening for the hashchange event? This works for me:

window.addEventListener('load', () => {
    window.history.replaceState('','','/',('#')[0]);
});

window.addEventListener('hashchange', () => {
    window.history.replaceState('','','/',('#')[0]);
});

Used a combination of stckvrw's code, Manjeet Numar Kai's code, and the hashchange event.

Using pushState instead of replaceState is supposed effect browser history entries and back button functionality. I'm getting separate browser entries with both though.

edited Mar 10, 2024 at 23:09

answered Mar 10, 2024 at 17:26

ddd

113 bronze badges

Collectives™ on Stack Overflow

How To Hide Hash Id In The URL Bar Using JavaScript

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related