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>

You Might Find Your Solution [Here](https://stackoverflow.com/questions/5928435/append-remove-anchor-name-from-current-url-without-refresh) — Swaggerboy, Dec 11 '18 at 05:12

score 1 · Answer 1 · edited Dec 11 '18 at 06:15

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

edited Dec 11 '18 at 06:15

Yogesh Patel

818
2
12
26

answered Dec 11 '18 at 05:21

Jack Bashford

43,180
11
50
79

score 0 · Answer 2 · answered Dec 12 '18 at 17:06

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;
      }
    }
  });
});

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

2 Answers2