Is there a way to remove the anchor link #anchor from the address bar?

 *{ margin:0; padding:0; text-decoration:none; } menu{ width:100%; height:50px; background:#fff; line-height:50px; outline:1px solid #eee; } menu span{ position:relative; } menu span:after{ content:''; border:5px solid transparent; border-top:5px solid blue; position:absolute; right:-14px; top:48%; } menu a{ color:blue; } menu .preview{ background:#fff; outline:1px solid #eee; display:inline-block; height:50px; padding:0 18px; position:relative; } .preview .block{ position:absolute; top:51px; left:0; width:600px; height:400px; background:#fff; display:none; outline:1px solid #eee; } .preview:hover .block{ display:block; } .block .content{ width:90%; height:90%; border:1px solid #eee; margin:15px auto; overflow:hidden; } .content .left,.right{ float:left; height:100%; } .content .left{ width:30%; background:#fff; position:relative; } .content .left_menu { position:absolute; top:0; bottom:0; left:15px; right:0; outline:1px solid #eee; width:90%; height:300px; margin:auto; } .left_menu p{ background:#eee; margin:0 0 1px 0; padding-left:3px; } .left_menu pa{ display:block; width:100%; height:100%; } .content .right{ width:70%; background:#fff; position:relative; } .content .right .right_preview{ width:300px; height:300px; background:#fff; position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; overflow:hidden; } .news{ width:100%; height:100%; } #a{ background:red; } #b{ background:blue; } #c{ background:green; } 
  <menu> <div class="preview"> <span><a href="">Примеры</a></span> <div class="block"> <div class="content"> <div class="left"> <div class="left_menu"> <p><a id="clear_anchor" href="#c">Примеры скриптов</a></p> <p><a id="clear_anchor" href="#b">Новинки видео</a></p> <p><a id="clear_anchor" href="#a">Последние посты</a></p> </div> </div> <div class="right"> <div class="right_preview"> <div id="a" name="" class="news"></div> <div id="b" name="" class="news"></div> <div id="c" name="" class="news"></div> </div> </div> </div> </div> </div> </menu>

This leaves a trace in the address bar of the browser, namely #a,#b,#c and this should be removed. window.location.hash tried:

 <script> window.hashName = window.location.hash; window.location.hash = ''; $(window).load(function () { $('html, body').animate({scrollTop: $(window.hashName).offset().top}, 2000); return false;}); }); </script> <script src="https://code.jquery.com/jquery-1.10.2.js"> </script> <script type="text/javascript"> function init() { var buttons = document.getElementById('clear_anchor'); buttons.onclick = function() { history.pushState('', document.title, window.location.pathname); }; } </script>

what caused html to stop working altogether

2 answers 2

You can just call window.location.hash = '';

May stay # . If this does not suit you, you can try to do this:

 window.location = window.location.protocol + "//" + window.location.hostname + window.location.pathname + window.location.search

But this may lead to a page reload.

Or using regular expressions:

 var url = window.location.toString(); url = url.replace(/#anchor/,''); window.location = url;

* from here

You can remove everything to an anchor as follows:

 window.location = window.location.protocol + "//" + window.location.hostname + window.location.hash;

or so:

 window.location.pathname = '';

I hope I understand the question correctly.

  • So it’s written to remove the link before the anchor , not after . - Regent
  • @Regent, oops, I'm editing now. - Aim X
  • all methods did NOT work! I will add right now - user33274
  • I wanted this geyanpeaple.imtqy.com/hoverJqueryMenu - user33274

You can try this:

 function deleteAnchor() { var str = document.location.toString(); document.location = str.substring(0, str.lenght - str.indexOf('#')); }

And then just call when you need to remove the anchor.

 <input type="button" value="Удалить якорь" onclick="deleteAnchor()">