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" );
    });