Remove something wrong from url

Question

I have a url that goes like this index.aspx, but when I click on a button that is linked to a anchor tag it adds this #video

so it will look

index.aspx#video

is there away to remove #video from url?

yes I would like to anchor still to work, I would like to remove the #video after if possible — user979331, Apr 09 '13 at 17:53
Are you trying to get the current url without the #video (i.e. for passing it as a string variable to a method, etc), or are you trying to remove it from the visible URL bar in the browser and still have the page navigated to that section? The former problem is easy, just use a string replace or a regex replace and I'll happily post a solution. If the latter is what you are interested in, then please also explain why this would be important. — Randall Borck, Apr 09 '13 at 20:27

score 0 · Answer 1 · edited May 23 '17 at 12:12

I haven't gotten much feedback, so here are three options due to the ambiguity of your question.

Option 1 - Use the anchor location, remove the anchor, rescroll the window appropriately.

You can access the # value using location.hash as referenced by this article. Unfortunately as soon as you set the location.hash = '', the page re-navigates to the top of the screen (and leaves the # symbol in the URL). If you set the location.href, the page navigates away from the page losing any local variables stored.

One possible work around that you could do is something like the following:

function RemoveHash(){
  var y = location.hash.substring(1, location.hash.length);
  location.hash = '';
  window.scrollTo(0, y);
}

The downside of this is that the screen will flash as it moves the screen back to the top and back down to your location. Another way you could do it is instead of using the anchors, find the location of the elements on the page, but this, in my experience, has been inaccurate and varies between browsers and becomes a maintenance issue. JQuery libraries may help this some though, may be worth looking into if you go down this route.

Option 2 - Get the Url without the anchor tag

You can do the replacement RegEx to remove the anchor from the url, you can use something like the following:

location.href.replace(/\#\w+/g, "");

Option 3 - Don't use anchors and use JavaScript to scroll

You could just not use anchors and just have the page scroll to the correct location using JavaScript by following this tutorial. The basic idea is getting the scroll offset of the element and scrolling the screen to that location.

function elmYPosition(eID) {
    var elm = document.getElementById(eID);
    var y = elm.offsetTop;
    var node = elm;
    while (node.offsetParent && node.offsetParent != document.body) {
        node = node.offsetParent;
        y += node.offsetTop;
    } return y;
}

And use the hyperlink to call the javascript:

<a href="javascript:void(0);" onclick="window.scrollTo(0, elmYPosition('myAnchor'))>myAnchor</a>

Remove something wrong from url

1 Answers1