Question 108618 in Html Question posted in
Some basic documentation can be found here.

Html – How do i remove # from the url for my one page website links

I have a website (i.e: https://example.com) with five navigation links (About, Services, Case Studies, Blog & Contact) and same in the footer out of which these three (About, Services & Case Studies)are one page links (i.e when we click on these links it takes us to a section on the same page (index.html)) but when i click on those links it shows /# (hashtag) in the URL. For example, if i am on index.html and click on about it takes me to the about section on the page but it shows this in the url: https://example.com/#about and i want it to display https://example.com/about or just https://example.com but still do the functionality which is taking me to the section.

Here is the code for nav html:

<nav>
                <ul class="navbar">
                    <li><a href="#about">About</a></li>
                    <li><a href="#services">Services</a></li>
                    <li><a href="#case_studies">Case Studies</a></li>
                    <li><a href="/blog.html">Blog</a></li>
                    <li><a class="btn" href="/contact.html">Contact</a></li>
                </ul>
            </nav>

Here are the sample pictures:

Navbar
navbar picture

URL
url picture

I am not good with JS frameworks and other languages except HTML & CSS so if the solutions unclodes steps outside of this please try to explain it in details, Thank you.

I have tried this solution: https://stackoverflow.com/questions/269044/remove-fragment-in-url-with-javascript-w-out-causing-page-reload but no luck.

Tags:

2

Answers


  1. 0

    You can use history.replaceState to change the displayed URL on the hashchange event.

    <script>
window.addEventListener('hashchange', e => {
    history.replaceState({}, "", location.hash.slice(1));
});
</script>
    Login or Signup to reply.
  2. 0

    This small Javascript code should do the trick:

    window.addEventListener('hashchange', _ => {
    history.replaceState(null, "", location.href.replace('#', ''));
});

    The event listener is called, when you click some of the # links and it will remove the # character in current URL. So from https://example.com/#about it will become https://example.com/about.

    Note: This will not work very well for URLs like https://example.com/some-page#about.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search