Search code examples
htmlurlhref

Hide the #hash fragment from the url while keeping the same behavior?

For a typical tag like this: 

 <a href="#sectionOne">One</a>

Is there a way to keep the same behavior of jumping to the corresponding id, but without displaying the fragment identifier in the url?

I know I can just write some js to handle all of this, but it seems like there outta be an easy way to do this, not that I could find any though.

Thanks!

Solution

  • The fragment identifier is part of the URL. You can't really navigate to a section in the document represented by the fragment identifier without having the fragment identifier in the destination URL.

    So the best you can do is to prevent the browser from navigating to the hash, and then faking the jump. And that — at least the former — requires JS.

    As mentioned in the comments, due to the nature of URL fragments you should avoid doing this unless you have a very specific reason to do so (e.g. if the hashes are an implementation detail and not intended to be exposed to or bookmarked by the user).