有没有一种方法可以覆盖浏览器点击哈希值的默认行为？

Question

当我有以下内容：

<a name='test'></a>

当我在浏览器中加载一个页面并将#test添加到URL中时，浏览器会滚动到<a>位于页面顶部。 然而，我希望改变这种行为（如果可能的话使用JavaScript）使得使用哈希不会滚动页面 - 我希望它只是什么都不做。

有没有一种方法可以在不删除<a>元素的情况下这样做？

---

更新：我需要浏览器仍然发送onhashchange()事件，但是不要滚动到<a>元素。原因是我想覆盖滚动同时保留事件通知。

- Nathan Osman

---

你为什么要放置这个元素，如果你不想跳转到那里呢？ - Felix Kling

@Felix：我没有。我无法控制页面内容...我正在编写一个用户脚本。 - Nathan Osman

Answer 1

一个快速的粗略解决方案，但你可以在此基础上进行改进。

var curScroll = prevScroll = $(window).scrollTop()

$(window).bind('scroll', function() {
  prevScroll = curScroll
  curScroll = $(this).scrollTop()
}).bind('hashchange', function() {
  $(this).scrollTop(prevScroll)
})

我在这里使用了jQuery来使其跨浏览器工作，并保持页面的onhashchange和onscroll处理程序不变。我发现的一个问题是，如果您两次单击相同的hashtag，它仍会滚动。

---

更新：我刚找到了更好的解决方案：

$('a').live('click', function() {
  if (this.href.split('#')[0] == location.href.split('#')[0]) {
    var scrollTop = $(window).scrollTop()
    setTimeout(function() {
      $(window).scrollTop(scrollTop)
    }, 0)
  }
})

- Alexey Lebedev

Answer 2

好吧，你可以尝试粗暴一些:

var i, elems = document.getElementsByTagName('a');
for (i = 0; i < elems.length; i++) {
    elems[i].removeAttribute('name');
}

它必须在DOM准备就绪之后但在呈现之前运行，因此您必须将其放在正确的位置。它不适用于“id”属性-仅适用于<a name=...>。

它是否实现了您想要的功能？

- rsp

---

嗯...我想我应该更详细地解释一下问题...但是我需要浏览器仍然发送onhashchange()事件，但是不要滚动到<a>。 - Nathan Osman

我想你没有这样做，因为它恰好执行了你在评论中所说的操作。 - rsp

Answer 3

试试这个：

$( 'a[href="#"]' ).click( function(e) {
  e.preventDefault();
} );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

- Serban Petrisor Catalin

Answer 4

一种有点取巧的技巧是，如果URL中有哈希标记，就自动滚动到页面顶部：

if (window.location.hash) {
    window.scrollTo(0, 0);
}

- sdleihssirhc

---

也许还可以将此函数绑定到 window.onhashchange。但问题是这样会总是跳转到顶部，所以它并没有什么作用。 - Felix Kling

@Felix 噢，是的，我忘记了那件事。 - sdleihssirhc

这应该可以工作，但取决于userjs获得控制的时间（即：GreaseMonkey与Opera之间的区别）。 - Free Consulting

Answer 5

也许你需要使用一些jQuery和字符串操作

removeHashPartFromString = function() {
 ...
}

$('a').each(function() {
    this.attr('href') = removeHashPartFromString(this.attr('href'));
}); 

或者找到具有哈希的元素，并从这些元素中删除名称哈希属性。

- Puneet

---

这如何帮助name属性并手动添加#name到URL（即不通过点击）？ - Felix Kling

我对问题的理解是 - 锚点标签具有#名称，这使得浏览器移动到页面中匹配元素的位置。因此，我建议的解决方案是从锚点标签中删除#名称。 - Puneet