有没有办法覆盖浏览器单击哈希值的默认行为？

Question

当我有以下内容时：

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

...并将其加载到浏览器中，我可以将 #test 附加到 URL，浏览器将滚动，以便 位于页面顶部。

但是，我想更改此行为（如果可能的话使用 JavaScript），以便使用哈希不会滚动页面 - 我希望它什么也不做。

有没有办法在不删除 元素的情况下实现这一点？

---

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

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 处理程序完好无损。我发现的一个问题是，如果您单击同一个主题标签两次，它无论如何都会滚动。

---

UPD。我刚刚找到了一个更好的解决方案：

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

Answer 2

好吧，你可以尝试变得更残酷：

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

它必须在 DOM 准备好之后、渲染之前运行，所以你必须将它放在正确的位置。它不适用于“id”属性 - 仅适用于

它能达到你想要的效果吗？

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>

Answer 4

一种 hacky 技术是，如果 url 中存在哈希值，则自动滚动到页面顶部：

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

Answer 5

也许您需要使用一些jquery和字符串操作

removeHashPartFromString = function() {
 ...
}

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

，或者找到带有散列的元素并从这些元素中删除名称散列属性。