Problem with url

Question

I made a page where all the content is in it (there are no other pages). I had to adapt a kind of user-friendly url to it, because by clicking on the page sections, the cursor goes to a certain point. It is working correctly, but is a # in the url.

$("a.menu__item").on('click', function(event) {

  if (this.hash !== "") {

    event.preventDefault();

    var hash = this.hash;

    $('html, body').animate({
      scrollTop: $(hash).offset().top
    }, 800, function() {

      window.location.hash = hash;

    });
  }
});

I managed to get the #

$("a.menu__item").on('click', function(event) {

  if (this.hash !== "") {

    event.preventDefault();

    var hash = this.hash;

    $('html, body').animate({
      scrollTop: $(hash).offset().top
    }, 800, function() {

      history.pushState(null, null, 'a.menu__item');
      if (history.pushState) {
        var url_a = hash.substring(1, hash.length);
        history.pushState(null, null, url_a);
      } else {
        location.hash = url_a;
      }
    });
  }
});

However, if I open the page in client/blog, it says that the page does not exist. It would be better to leave the # or it is plausible some idea for the problem of opening the page and it does not exist?