How to remove the "#" symbol from the URL

Question

I have a link that takes me to another section of the same page like this:

<a class="nav-link" href="#about">About</a>

that takes me here:

<section class="page-section bg-primary" id="about"></section>

Whenever I click on the link, the search bar shows up as http://mywebsite.com/home/#about. I want it so that whenever an anchor link is clicked it takes me to that section in the page but instead of having a hash in the search bar I want it nice and clean with / instead of #, like http://mywebsite.com/home/about. How can I achieve this?

This is the default behavior of html5, you can't change it, `#` indicates id of any element, the thing you want i.e. clean urls, you can achieve that through django's urls. — Sunderam Dubey, Jun 22 '22 at 13:04
yeah but i don't know how to move from one section to another from the same page using django — , Jun 22 '22 at 13:08
You cannot move in the page using routes, so this is the default behavior. It can be done if you create another page for about section. — Sunderam Dubey, Jun 22 '22 at 13:09
yeah i figured thank you, i spent the whole day searching and now im just gonna make each section in an HTML file. — , Jun 22 '22 at 13:18
Does this answer your question? [How to remove the hash from window.location (URL) with JavaScript without page refresh?](https://stackoverflow.com/questions/1397329/how-to-remove-the-hash-from-window-location-url-with-javascript-without-page-r) — Abdul Aziz Barkat, Jun 22 '22 at 15:38

KooiInc · Accepted Answer · 2022-06-23T05:54:25.030

0

This may be done using a popstate event handler and history.replaceState.

Not sure if this is necessarily the best or even a viable solution.

window.addEventListener(`popstate`, handle);

function handle(evt) {
  if (location.hash) {
    history.replaceState(null, ``, location.pathname);
  }
}

It can't be demonstrated in a snippet here, so check this stackblitz.

edited Jun 23 '22 at 05:54

answered Jun 22 '22 at 13:37

KooiInc

119,216
31
141
177

score 0 · Answer 2 · answered Jun 23 '22 at 05:59

0

This should do it: location.origin+location.pathname.

answered Jun 23 '22 at 05:59

Carsten Massmann

26,510
2
22
43

code · Answer 3 · 2022-06-23T06:36:52.527

You can listen for the hash change and replace the search bar's # with a /.

Here's some (independent) code:

let first = true; // so we know whether to replace or add
window.addEventListener("hashchange", () => {
    if(first)
        return (
            history.pushState(null, null, location.href.replace("#", "/")),
            first = false
        );
    const all = location.href.split("/"); // if we replaced the last one with `/`, we don't want to add on to it
    all[all.length - 1] = location.hash.slice(1); // slice(1) gets rid of the `#`
    history.pushState(null, null, all.join("/"));
});

This exhibits all the normal traits of an anchor link, where when you click on a link the page's history is pushed instead of replaced. I think this is also what you wanted from what I could understand in your question.

score 0 · Answer 4 · answered Jun 23 '22 at 06:53

This behavior is part of HTML. In my opinion is that good to have hash routes. But i dont know your issue. How ever. A simple solution would be to listen to the anchors and remove the # after clicking.

const anchors = document.querySelectorAll(".nav-link");
anchors.forEach(a => {
  a.addEventListener("click", () => {
    console.log("remove # from: ", window.location.href)
    window.location.href.split('#')[0]
    return false;
  })
})

How to remove the "#" symbol from the URL

4 Answers4