How to remove "#id of a div" from address bar in html while using href?

Question

I am making a static website in which I am using href to go to particular div/section and which is working flawlessly. But I am trying to remove id of a div from address bar "http:localhost:3000/index.html/#about" when user clicks particular link.

Index.html

<a href="#about">About</a>
<a href="contacts">Contacts</a>

<section id="about></section>

<section id="contacts"></section>

Answer 1

This is the simplest way to do it:

<a href="#About" id="aboutButton">About</a>

I added that ID for this event listener:

document.getElementById("aboutButton").addEventListener("click", function() {
    window.location.href = location.pathname;
)}

This will remove everything from address bar after .html

Answer 2

This block of code worked for me

 $(function() {
  // Smooth Scrolling
  $('a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});