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

Question

是否可以从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

当用户单击“ 链接 ”时，修改的哈希标记没有任何页面跳转，因此工作正常。

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

Answer 1

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

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

要么

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

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

Answer 2

我在几个网站上使用以下内容，NO PAGE JUMPS！

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

Answer 3

window.location的hash属性在很多方面都是愚蠢的。 这是其中之一; 另一个是具有不同的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(/#.*$/, '#'); 
}

Answer 4

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

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

那就行了

Answer 5

将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');

希望这可以帮助。

Answer 6

我不确定这是否会产生预期的结果，试一试：

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

基本上保存滚动偏移并在分配空哈希后恢复它。

Answer 7

你试过return false;吗return false; 在事件处理程序中？ 当你这样做时，jQuery会做一些特别的事情，类似于，但AFAIK比e.preventDefault更具影响力。

Answer 8

希望这可以帮助

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

没有任何哈希的URL。
http://output.jsbin.com/tojeja

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