Javascript 如何在不导致页面滚动的情况下删除位置哈希？

是否可以从

窗口.location

中删除哈希，而不导致页面跳转到顶部？我需要能够在不引起任何跳跃的情况下修改哈希

我有这个：

$('<a href="#123">').text('link').click(function(e) {
  e.preventDefault();
  window.location.hash = this.hash;
}).appendTo('body');

$('<a href="#">').text('unlink').click(function(e) {
  e.preventDefault();
  window.location.hash = '';
}).appendTo('body');

$（'

当用户单击“链接””时，哈希标记将被修改，不会出现任何页面跳转，因此工作正常

但是，当用户单击“取消链接””时，has标记将被删除，页面滚动将跳到顶部。我需要删除哈希，而不会产生这种副作用。
我相信，如果您只是放入一个虚拟哈希，它将不会滚动，因为没有匹配项可滚动

<a href="#A4J2S9F7">No jumping</a>



或



“#”
本身相当于
“_top”
因此会导致滚动到页面顶部
我不确定这是否会产生所需的结果，请尝试一下：

$('<a href="#">').text('unlink').click(function(e) {
    e.preventDefault();
    var st = parseInt($(window).scrollTop())
    window.location.hash = '';
    $('html,body').css( { scrollTop: st });  
});

$（''）.text（'unlink'）。单击（函数（e）{
e、 预防默认值（）；
var st=parseInt（$（窗口）.scrollTop（））
window.location.hash=''；
$（'html，body'）.css（{scrollTop:st}）；
});

基本上保存滚动偏移量，并在分配空散列后将其还原。
窗口。location的散列属性在两个方面都很愚蠢。这是其中之一；另一个是具有不同的get和set值：

window.location.hash = "hello";  // url now reads *.com#hello
alert(window.location.hash);   // shows "#hello", which is NOT what I set.
window.location.hash = window.location.hash; // url now reads *.com##hello

请注意，将哈希属性设置为“”也会删除哈希标记；这就是重定向页面的原因。若要将url的哈希部分的值设置为“”，保留哈希标记并因此不刷新，请编写以下内容：

window.location.href = window.location.href.replace(/#.*$/, '#');

一旦设置了哈希标记，就无法在不刷新页面的情况下完全删除该哈希标记

2012年更新：

正如Blazemonger和thinkdj所指出的，技术已经改进。有些浏览器确实允许您清除该标签，但有些浏览器不允许。要同时支持这两种功能，请尝试以下方法：

if ( window.history && window.history.pushState ) { 
    window.history.pushState('', '', window.location.pathname) 
} else { 
    window.location.href = window.location.href.replace(/#.*$/, '#'); 
}

您是否在事件处理程序中尝试过
返回false；
？当您这样做时，jQuery会做一些特殊的事情，类似于
e，但比
e更有效。preventDefault
将window.location.hash设置为空或不存在的锚名称，将始终强制页面跳转到顶部。防止这种情况的唯一方法是抓住滚动窗口的位置，并在哈希更改后再次将其设置为该位置

这也将强制重新绘制页面（无法避免），但由于它是在单个js进程中执行的，因此不会上下跳转（理论上）

$（''）.text（'link'）。单击（函数（e）{
e、 预防默认值（）；
window.location.hash=this.hash；
}).附于（“主体”）；
$（''）.text（'unlink'）。单击（函数（e）{
e、 预防默认值（）；
var pos=$（窗口）.scrollTop（）；//获取滚动位置
window.location.hash=''；
$（窗口）.scrollTop（位置）；//设置回滚动位置
}).附于（“主体”）；

希望这有帮助。
我在一些网站上使用了以下内容，没有页面跳转

对于HTML5友好的浏览器来说，地址栏非常干净，而对于较旧的浏览器来说，地址栏只是一个#

$('#logo a').click(function(e){
    window.location.hash = ''; // for older browsers, leaves a # behind
    history.pushState('', document.title, window.location.pathname); // nice and clean
    e.preventDefault(); // no page reload
});

这是一篇老文章，但我想分享我的解决方案
我的项目中由JS处理的所有链接都具有href=“#u JS”属性（或您只想用于此目的的任何名称），在页面初始化时，我执行以下操作：

$('body').on('click.a[href="#_js"]', function() {
    return false;
});

这样就可以了希望这有帮助

html

没有任何哈希的URL。


带有不跳转到锚点的标签的URL。

让我猜猜看：您的客户认为散列很难看，并且正在污染一个漂亮的、干净的URL，该URL的内容是：http://www.example.com/（没有空格）？很好的猜测，但不是。我有基于散列url的可书签模式窗口，当用户关闭窗口时，散列需要删除。我知道这个问题已经存在将近2年了，但此评论可能对未来的读者有所帮助。如果您真的想删除散列，可以使用history.pushState（）更改url@joshli，遗憾的是，它在
IE9
上不起作用。不完全正确…将哈希设置为“”会滚动到顶部，但如果没有具有匹配
id
属性的命名锚点或元素，浏览器将不会滚动。这不是最佳的，但已经足够好了。我使用了“#/”，得到了相同的结果。
window.location.hash=（new#hash==”）？“？”：新的\u散列；
对此解决方案不满意，那么：我在兼容浏览器的jQuery和本机事件处理程序中使用
window.location.hash=“
return false；”
相当于
e.preventDefault（）；e.stopPropagation（）；
。我认为停止传播对解决这个问题没有帮助。它对我很有效，只是我使用了
$（window）.scrollTop（st）
而不是
.css（）
尝试了这个，因为我需要将散列更改为现有的#id。一切正常，但当我尝试使用鼠标滚动时，在更改散列后，滚动会跳到零。有没有关于什么原因的想法？
历史记录。replaceState
可能更可取，因为按back会返回到最后一个有效的URL。此外，它还可以需要注意的是，此代码设置对导航历史记录进行了两次更改。结果是，当用户按下“后退”按钮时，他们将首先通过[url]#进行路由，然后需要再次单击才能到达[url]如果你在开发后退按钮体验，考虑一个有条件的方法，不要设置状态两次。不正确。支持<代码>窗口的浏览器。历史< /代码>让你做到这一点。@ BraseMuner-Error！你可以使用一个历史。；但是，这一评论是在2010年2月发表的，浏览器在2011年年中左右开始支持pushState。上面的代码不保留查询字符串。请使用
window.history.pushState（“”，，，window.location.pathname+window.location.search）；
$('#logo a').click(function(e){
    window.location.hash = ''; // for older browsers, leaves a # behind
    history.pushState('', document.title, window.location.pathname); // nice and clean
    e.preventDefault(); // no page reload
});

$('body').on('click.a[href="#_js"]', function() {
    return false;
});

<div class="tabs">
  <ul>
    <li><a href="#content1">Tab 1</a></li>
    <li><a href="#content2">Tab 2</a></li>
    <li><a href="#content3">Tab 3</a></li>
  </ul>
</div>
<div class="content content1">
    <p>1. Content goes here</p>
</div>
<div class="content content2">
    <p>2. Content goes here</p>
</div>
<div class="content content3">
    <p>3. Content goes here</p>
</div>

function tabs(){
  $(".content").hide();

  if (location.hash !== "") {
    $('.tabs ul li:has(a[href="' + location.hash + '"])').addClass("active");
    var hash = window.location.hash.substr(1);
    var contentClass = "." + hash;
    $(contentClass).fadeIn();
  } else {
    $(".tabs ul li").first().addClass("active");
    $('.tabs').next().css("display", "block");
  }
}
tabs();

$(".tabs ul li").click(function(e) {
  $(".tabs ul li").removeAttr("class");
  $(this).addClass("active");
  $(".content").hide();
  var contentClass = "." + $(this).find("a").attr("href").substr(1);
  $(contentClass).fadeIn();
  window.location.hash = $(this).find("a").attr("href");
  e.preventDefault();
  return false;
});