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

是否可以在window.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');

在此处查看实时示例：http : //jsbin.com/asobi

当用户单击“ link ”时，哈希标签被修改而没有任何页面跳转，因此可以正常工作。

但是，当用户单击“取消链接”时，has标记将被删除，页面滚动跳转到顶部。我需要删除没有这种副作用的哈希。

我相信，如果您只放入一个虚拟哈希，它将不会滚动，因为没有匹配项可滚动到。

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

要么

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

"#"本身等效于"_top"因此导致滚动到页面顶部

我在一些网站上使用以下内容，没有页面跳转！

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

window.location的hash属性在几种方面都很愚蠢。这就是其中之一；另一个是具有不同的获取和设置值：

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

注意，将hash属性设置为''也会删除哈希标记；这就是重定向页面的原因。要将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(/#.*$/, '#'); 
}

这是一篇旧文章，但我想分享我的解决方案由JS处理的项目中的所有链接都具有href =“ #_ js”属性（或仅用于此目的的任何名称），并在页面上进行初始化我做：

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

这样就可以了

将window.location.hash设置为空或不存在的锚名称，将始终强制页面跳至顶部。防止这种情况的唯一方法是获取窗口的滚动位置，并在更改哈希值之后再次将其设置为该位置。

尽管由于它是在单个js进程中执行的，所以它也将强制页面的重新绘制（不能避免），从理论上讲，它不会向上/向下跳动。

$('<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();
    var pos = $(window).scrollTop(); // get scroll position
    window.location.hash = '';
    $(window).scrollTop(pos); // set scroll position back
}).appendTo('body');

希望这可以帮助。

我不确定这是否会产生所需的结果，请试一下：

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

基本上保存滚动偏移量，并在分配空哈希之后将其还原。

您是否尝试return false;过事件处理程序？这样做时，jQuery会执行一些特殊的操作，类似于，但AFAIK的影响更大e.preventDefault。

希望这可以帮助

html

<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>

js

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

不含任何哈希的网址。
http://output.jsbin.com/tojeja

带有＃标签的URL不会跳转到锚点。
http://output.jsbin.com/tojeja#content1