How to remove same page hyperlink name from url?

Question

My webpage is long so in the heading I have linked buttons to different parts of my page. But when I click them, it changes from, for example, www.helloworld.com to www.helloworld.com/#part1 . How do I remove this "part1"? I know how to remove .html .php , but i dont know how to remove this.

<li><a href="#part1" class="current"><strong>Story</strong></a></li>

This is the button and it is linked to

<div id="part1"></div>

Thanks.

Answer 1

OKay, if you wanna make it smooth-scroll and remove the link follow the page, you can do so only by using JavaScript. Either add a return false to the onclick event of the anchor or provide an alternate mechanism:

<li><a href="#part1" class="current" onclick="return false;"><strong>Story</strong></a></li>

The above code doesn't add the #part1 to the URL, but it also doesn't let you navigate to the <div> . So, you need to do this:

<li><a href="#part1" class="current" onclick="window.scrollTo(0, document.getElementById('part1').offsetTop); return false;"><strong>Story</strong></a></li>

The return false; will make the link not add the extra part. And the window.scrollTo navigates the page to the right position.

To make this scalable for all the internal links, for a relatively new browser, that supports document.queryStringAll , do this:

document.queryStringAll('a[href^="#"]').onclick = function (e) {
  e.preventDefault();
  window.scrollTo(0, document.getElementById(this.attribute("href").substr(1)).offsetTop);
  return false;
}