Clear Hash in URL

Question

I made a site with Bootstrap which contains two pages:

index.html
impressum.html

I want to use page jumps inside index.html and access those page jumps from the impressum aswell. This works fine but as soon as I click on a page jump from the impressum.html it stays in the URL and won't go away.

The hashtags in the URL are *directly* correlated to the element to jump to; you need them in the URL for your browser to be able to interpret where it should jump you to. Why would you want to mask them? — Obsidian Age, Dec 20 '17 at 01:39

score 2 · Accepted Answer · answered Dec 20 '17 at 01:41

2

You could use a little of JavaScript like this:

function clearHash(){
  var uri = window.location.toString();
  if (uri.indexOf("#") > 0) {
      var clean_uri = uri.substring(0, uri.indexOf("#"));
      window.history.replaceState({}, document.title, clean_uri);
  }
}

And then trigger the Function on the scroll event:

$(window).scroll(function(){
    clearHash();
});

(I'm assuming that you are using JQuery because of the Bootstrap)

answered Dec 20 '17 at 01:41

Matheus Cuba

2,068
1
20
31

Thanks a lot. This works perfectly as long as the scroll event is triggered. When I click on a jump link from the impressum.html the scroll event isnt triggered though. Now I added a `clearHash();` in the of my index.html so even when the page is loaded the hashtag gets removed (You can try this again by visiting the "impressum" and then clicking on "Services"). You can see that the #Jump_Services appears for a split second until the js function is triggered. Is this a bad workaround? It feels dirty to be honest. – user363808 Dec 20 '17 at 03:25

Clear Hash in URL

1 Answers1