How to remove Location Hash in url using JavaScript or JQuery

Question

This is different from existing queries here.

I am facing removing #url when destination id is in different page.

Here's what I've done : There are 2 HTML pages : index.html & about.html. I have shown various Menu information using <div id="one"></div> in index.html page rather than separate page for every menu item, to remove #url when clicked I have tried the below lines separately.

history.pushState('', document.title, window.location.pathname);

var target = $(this.target);

However, #url is not showing only in index.html page. But, when clicked on menu items in about.html page the #url is still visible (because the <div id=""></div> are in index.html). Can you help me to remove #url even the destination id is in different page.

Can you please define the URL in which you getting hash value? — Hitesh Kumar
– Hitesh Kumar, Commented Sep 4, 2020 at 7:44
The history.pushState() does remove the hash when I try it out. What is this.target? — Emiel Zuurbier
– Emiel Zuurbier, Commented Sep 4, 2020 at 7:44
Look at stackoverflow.com/questions/13266746/… / developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView — G-Cyrillus
– G-Cyrillus, Commented Sep 4, 2020 at 7:53
this one seems to validate your requirement . (its all around event.preventDefault() to avoid click be efficient but fire only the script) stackoverflow.com/questions/28678548/… — G-Cyrillus
– G-Cyrillus, Commented Sep 4, 2020 at 8:13
Hi @HiteshKumar, I'm seeing #url when I click on Menu items { Destination content is in index.html } in about.html — Bezawada Harikrishna
– Bezawada Harikrishna, Commented Sep 4, 2020 at 8:54

Emiel Zuurbier · Accepted Answer · 2020-09-04 09:21:41Z

1

If I understand correctly you have two pages with identical navigation that include anchors with hash values, like: #target. But you don't have the elements that the anchors refer to at both pages, so the hash has no use on the page without the, for example: <div id="target">.

If that is the case then the snippet below could help. It reads the hash value from the location object and then tries to select the element with that hash. If no element is found on the page, the URL will be updated. Place this script on every page and run it instantly.

var hash = location.hash;
var $targets = $(hash);
if (!$target.length) {
  history.pushState('', document.title, location.pathname);
}

answered Sep 4, 2020 at 9:21

Emiel Zuurbier

21.2k3 gold badges25 silver badges36 bronze badges

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

Collectives™ on Stack Overflow

How to remove Location Hash in url using JavaScript or JQuery

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related