If I send someone a link how can I go about clearing that hashtag and text from the URL on page load .

I've been building lightboxes that utilize the CSS :target attribute. I would like it so if someone sends or clicks a link with the hashtag and text appended to the URL that the page essentially ignores it or clears it from the URL on load.

I thought this would be a pretty mon issue with a simple answer but haven't run across anything in my research. I'm open to answers that include JavaScript & jQuery.

If I send someone a link http://example./#about how can I go about clearing that hashtag and text from the URL on page load http://example..

I've been building lightboxes that utilize the CSS :target attribute. I would like it so if someone sends or clicks a link with the hashtag and text appended to the URL that the page essentially ignores it or clears it from the URL on load.

I thought this would be a pretty mon issue with a simple answer but haven't run across anything in my research. I'm open to answers that include JavaScript & jQuery.

• javascript
• jquery
• url
• anchor
• hashtag

• 1 parent.location.hash='' ; This should remove the hash – Faisal Ashfaq Commented Apr 20, 2016 at 7:21
• alert(window.location.href.split('#')[0]); – Ranjeet Singh Commented Apr 20, 2016 at 7:22

4 Answers 4

If you don't mind the hashtag being present but empty, you can use:

document.location.hash = '';

Which will change http://example./#about to http://example./# without reloading the page, also has higher backwards patibility than history.pushState.

You can use it after making sure the popup or whatever is loaded properly, just call this line as it is and it'll work.

use history.pushState which does not reload the page or leave a trailing #:-

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

pushState() takes three parameters: a state object, a title (which is currently ignored), and (optionally) a URL.

URL — The new history entry's URL is given by this parameter. Note that the browser won't attempt to load this URL after a call to pushState(), but it might attempt to load the URL later, for instance after the user restarts the browser. The new URL does not need to be absolute; if it's relative, it's resolved relative to the current URL. The new URL must be of the same origin as the current URL; otherwise, pushState() will throw an exception. This parameter is optional; if it isn't specified, it's set to the document's current URL.

In a sense, calling pushState() is similar to setting window.location = "#foo", in that both will also create and activate another history entry associated with the current document. But pushState() has a few advantages:

The new URL can be any URL in the same origin as the current URL. In contrast, setting window.location keeps you at the same document only if you modify only the hash.

window.location.hash = '';//remove hash text
window.location.href.replace('#', '');//remove hash
history.replaceState(null, null, window.location.href);//replace state

I can't ment, but to add to BenG's answer, those who don't want their visitors to have an additional step in their History should use history.replaceState(null, null, window.location.pathname).

If you use pushState, your visitor will hit back and be taken to the state/hash that you removed from the URL, which can lead to lower overall visitor satisfaction.

EDIT: Also, per the OP's use case, I would make sure you bind any popstate or hashchange functions after you've modified the History object (such as any animated scrollTo's or whatnot).