0

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.

Unmitigated
  • 76,500
  • 11
  • 62
  • 80
True North
  • 33
  • 3

2 Answers2

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>
Unmitigated
  • 76,500
  • 11
  • 62
  • 80
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.

MaBed
  • 178
  • 8