如何移除单页网站导航链接URL中的#号并保留锚点功能

我有一个网站（示例：https://example.com），包含五个导航链接：About、Services、Case Studies、Blog 和 Contact，页脚也配置了相同的导航。其中About、Services 和 Case Studies 这三个是单页锚点链接，点击后会跳转到index.html页面内的对应区块，但URL末尾会出现/#哈希标记——比如点击About链接后，URL会显示为https://example.com/#about。

我希望点击这些锚点链接后，URL显示为https://example.com/about 或者仅保留https://example.com，同时必须保留跳转到对应页面区块的功能。

当前导航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>

示例截图 #

导航栏 #

目标URL显示效果 #

我仅熟悉HTML和CSS，对JS框架及其他编程语言不太了解，如果解决方案涉及这些技术，请给出详细的步骤说明。之前我尝试过移除URL片段的JavaScript方案，但没有成功。

内容的提问来源于stack exchange，提问作者True North