javascript - 阻止哈希锚滚动

Question

 <li> <a href="#calculate">Calculate</a></li>
 <li> <a href="#calculate1">Calculate1</a></li>
 <li> <a href="#calculate2">Calculate2</a></li>

这是我拥有的代码，当我单击链接时，页面向下滚动到#calculate 所在的位置，这是可以理解的。但是我需要它不滚动我可以删除href的值，无论如何在不删除值#calculate并且不更改id名称的情况下阻止它滚动？

Answer 1

$('li > a[href*=calculate]').on('click', function(e) {
  e.preventDefault(); // this will prevent the page scroll

  // continue other code

});

阅读.preventDefault()

在这里，'li > a[href*=calculate]'将选择那些是直接（第一级）子级并在其属性li中包含calculate单词的锚标记。href

Answer 2

现场演示

在现代 jQuery 版本中：

$('a').on('click', function(e) {
  e.preventDefault();
});

其他 jQuery 版本：

$('a').click(function() {
  return false;
});

Answer 3

您可以将函数绑定到 click 事件并让它返回 false。

$("a").click(function() { return false; });

演示

Answer 4

只是阻止链接的默认操作

$('li > a[href^=#calculate]').on('click', function(e){
    e.preventDefault();
    return false;
});

'li > a[href^=#calculate]'选择一个a元素的 href 属性以#calculate该元素的子li元素开头

更多信息