80

是否可以删除散列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 标签被删除，页面滚动跳转到顶部。我需要删除没有这种副作用的哈希。

4

8 回答 8

98

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

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

或者

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

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

于 2010-02-19T11:30:12.707 回答
38

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

适合 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
});
于 2011-10-18T10:39:35.503 回答
18

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

请注意，将散列属性设置为 '' 也会删除散列标记；这就是重定向页面的原因。要将 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(/#.*$/, '#'); 
}
于 2010-02-19T11:39:39.690 回答
3

这是一篇旧文章，但我想分享我的解决方案我项目中由 JS 处理的所有链接都具有 href="#_js" 属性（或您只想用于此目的的任何名称），并且在页面初始化时我愿意：

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

这样就行了

于 2012-08-17T13:13:02.573 回答
2

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

希望这可以帮助。

于 2010-02-19T11:49:13.907 回答
1

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

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

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

于 2010-02-19T11:35:54.927 回答
1

您是否尝试return false;过事件处理程序？当你这样做时，jQuery 会做一些特别的事情，类似于，但 AFAIK 比e.preventDefault.

于 2010-02-19T11:43:25.033 回答
0

希望这可以帮助

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

于 2015-05-03T15:39:25.087 回答