点击链接时如何防止网页回到顶部

Question

我该如何防止每次点击链接时页面“跳动”？例如，我在页面中间有一个链接，当我点击它时，页面会跳到顶部。

- user1683645

---

请提供一些您的JavaScript或HTML代码，这样我们可以更好地帮助您... - user1386320

Answer 1

锚点的链接是href="#"吗？可以将其改为href="javascript:void(0);"。

如果您要阻止默认行为，请使用以下代码：

event.preventDefault ? event.preventDefault() : event.returnValue = false;

- David Nguyen

Answer 2

假设这是您链接的HTML：

<a href="#something" id="some_id">Some link goes somewhere...</a>

如果你正在使用jQuery，请尝试这样：

$(document).ready(function() {
    $('a#some_id').click(function(e) {
        e.preventDefault();
        return false;
    });
});

示例演示: http://jsfiddle.net/V7thw/

如果您不使用jQuery，可以尝试使用纯DOM JavaScript：

window.onload = function() {
    if(document.readyState === 'complete') {
        document.getElementById('some_id').onclick = function(e) {
            e.preventDefault();
            return false;
        };
    }
};

- user1386320

---

如果适合您，请单击答案投票计数下方的“灰色勾选项”接受它 :) - user1386320

Answer 3

如果将链接的href属性设置为#，它会跳转到顶部，因为它正在寻找锚标签。只需省略href属性，它就不会去任何地方，但它也不再像一个链接（请确保在JavaScript中处理click事件，否则它真的没有什么用）。

另一种选择是在JavaScript中处理单击事件，在事件处理程序内取消默认操作并返回false。

   e.preventDefault();
   return false;

- Bill

---

如果他删除“href”链接，它将不会被识别为“可点击”的链接项，请参见我的fiddle：http://jsfiddle.net/z4gmw/ - user1386320

取决于你想要的是什么。同时增加了有关如何取消默认操作的信息。 - Bill

是的，我只是使用链接来设置可点击属性，而实际事件我会用 JavaScript 来处理。我现在会尝试一下，谢谢！ - user1683645