How to remove #id on url page

Question

please help me for remove or hide my #id on url browser.

example:

my menu1 target on "#p1"
my site "mysite.com/index.htm"
when i click menu1 on my browser will like this "mysite.com/index.htm#p1"

i need my id not show on url browser just "mysite.com/index.htm" not like this "mysite.com/index.htm#p1"

#p1:target { background: red;}
#p2:target{ background: green;}
#p3:target{ background: blue;}
#p4:target{ background: yellow;}
#p5:target{ background: coral;}
#p6:target{ background: skyblue;}

ul{list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}
li {float: left;}

li a{ display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;}

li a:hover {
    background-color: #111;
}

<div id="menu">
    <input type="checkbox" id="tbl-menu"/>
    <label for="tbl-menu"><img src="drop.png" height="40px"  width="40px" alt=""></label>
        <nav class="nav">
         <ul class="tombol">
         <li class="tombolmenu">
             <a class="t1" href="#p1">Menu1</a></li>
            <li><a class="t2" href="#p2">Menu2</a></li>
            <li><a class="t3" href="#p3">Menu3</a></li>
            <li><a class="t4" href="#p4">Menu4</a></li>
            <li><a class="t5" href="#p5">Menu5</a></li>
            <li><a class="t6" href="#p6">Menu6</a></li>
          </ul>
         </nav>    
      </div>

<!-- My page target -->

<div id="p1">  Page1 </div>
<div id="p2">  Page2 </div>
<div id="p3">  Page3 </div>
<div id="p4">  Page4 </div>
<div id="p5">  Page5 </div>
<div id="p6">  Page6 </div>

You can't get/replace `#whatever` from URL using `.htaccess` because it is not parsed to server. — Naman, Dec 15 '16 at 10:43
Why would you want to do that? The point of the # anchor is that a user can use it to link directly to a point on your page. — DavidG, Dec 15 '16 at 10:44
Possible duplicate of [Remove/avoid adding target link to URL](http://stackoverflow.com/questions/18436700/remove-avoid-adding-target-link-to-url) — Shobhit Srivastava, Dec 15 '16 at 10:45
Possible duplicate of [How to remove the hash from window.location with JavaScript without page refresh?](http://stackoverflow.com/questions/1397329/how-to-remove-the-hash-from-window-location-with-javascript-without-page-refresh) — roberrrt-s, Dec 15 '16 at 10:48
you are using so it will work and redirect as a hyperlink. Try using click events of jQuery, you will get your answer. — Akshay Tilekar, Dec 15 '16 at 10:49
my question is, why you put # in your a tags. You can replace it with div id and using javascript with windows scroll. if it necessary to using # you should start using .htaccess which is more complicated. — Obink, Dec 15 '16 at 11:07
because my web will like this http://wayang.16mb.com/materi.html .cant with scroll because my page position on side left. — Ojan Mri, Dec 15 '16 at 11:11

score 2 · Answer 1 · answered Mar 16 '18 at 10:55

I know this question is starting to be old in Internet years but I thought I'd share my solution (which is loosely based off Janmejay Agrawal's).

It basically replaces the standard behaviour of a hyperlink and creates a smooth scrolling to the desired element.

This code uses "vanilla" JS and should work with most web browsers.

//Get all the hyperlink elements
var links = document.getElementsByTagName("a");

//Browse the previously created array
Array.prototype.forEach.call(links, function(elem, index) {
  //Get the hyperlink target and if it refers to an id go inside condition
  var elemAttr = elem.getAttribute("href");
  if(elemAttr && elemAttr.includes("#")) {
    //Replace the regular action with a scrolling to target on click
    elem.addEventListener("click", function(ev) {
      ev.preventDefault();
      //Scroll to the target element using replace() and regex to find the href's target id
      document.getElementById(elemAttr.replace(/#/g, "")).scrollIntoView({
          behavior: "smooth",
          block: "start",
          inline: "nearest"
          });
    });
  }
});

Should this code not be correct, please feel free to point it out !

Janmejay Agrawal · Answer 2 · 2018-03-22T13:51:19.910

There are several ways to do it, and my favourite is to make a custom function to scroll to in page link instead of relying on browser for it. Like this

$("a[href^='#']").click(function(e){
  e.preventDefault();
  var elem = $($(this).attr('href'));
  /* check for broken link */
  if(elem.length)
    $(window).animate('scrollTop' , elem.offset().top)
})

In addition of hiding '#id' from url it'll also animate scrolling.

Hope It'll help.

How to remove #id on url page

2 Answers2