javascript锚点避免在点击时滚动到顶部

Question

我在javascript中创建了一个函数，我将其添加到锚点

javascript：

somefunction = function () {alert('foo')}

html：

<a href="#" onclick="return somefunction()">anchor</a>

每次我点击锚点，该功能都会执行，但屏幕会滚动到顶部

我知道我可以做到这一点

<a href="javascript:void(0)" onclick="return somefunction()">anchor</a>

但我已经看到第一个选项在没有向上滚动的情况下实现了

有什么诀窍吗？

谢谢

Answer 1

onclick会导致页面重新提交，因此滚动到顶部。

您需要onclick事件才能返回false以避免回发。

这可以通过更改函数返回false来完成：

somefunction = function () {alert('foo'); return false;}

或者更改链接和onClick事件：

<a href="javascript:void(0)" onclick="somefunction(); return false;">anchor</a>

Answer 2

诀窍是你的onclick返回somefunction的值，这样如果你确保somefunction总是return false，那么事件也将返回false，并取消默认值锚的行为。

所以这应该可以解决你的问题：

somefunction = function () { alert('foo'); return false; }

但是我应该提一下，当somefunction中的某个地方出现错误时，其余的javascript将无法执行，浏览器仍然会关注#的链接。因此，建议使用javascript:void(0)，因为这样可以解决您的问题。

Answer 3

从你的onclick处理程序返回false，例如：

<a href="#" onclick="somefunction(); return false;">anchor</a>

Answer 4

您需要somefunction()返回false，或者您需要向return false处理程序明确添加onclick。例如：

<a href="#" onclick="somefunction(); return false;">anchor</a>

当有人点击时，浏览器会忽略链接的href部分。

Answer 5

我知道这个问题是针对JavaScript的，但是如果有人想在jQuery中进行操作，那将非常简单。

您可以为标签提供一个ID，并在jQuery中引用它以执行特定操作。

您需要做的-为避免滚动到顶部，是禁用a标签的默认操作。

代码：

$( "#a-tag-id" ).click(function(e) {
        e.preventDefault();
        alert( "Hello World" );
    });