单击链接后如何阻止页面跳到顶部

Question

我有一个筛选器，当您尝试更改体验级别时，页面会跳到最顶部。 我的代码如下所示：

视觉： http ： //imgur.com/OkSbAaB

<ul class="SecondNavigation">
<li>
    <nav class="CategoriesNaviation">
        <h3>Experience Filter</h3>

        <ul>
            <li>
                <a href="/">
                    <i class="fa fa-list fa-fw fa-2x"></i>
                    <span>No Filter</span>
                </a>
            </li>

            <li class="Selected">
                <a href="/Beginner/">
                    <i class="fa fa-list fa-fw fa-2x"></i>
                    <span>Beginner</span>
                </a>
            </li>
            <li>
                <a href="/Intermediate/">
                    <i class="fa fa-list fa-fw fa-2x"></i>
                    <span>Intermediate</span>
                </a>
            </li>
            <li>
                <a href="/Advance/">
                    <i class="fa fa-list fa-fw fa-2x"></i>
                    <span>Advance</span>
                </a>
            </li>
        </ul>
    </nav>
</li>

问题：有没有一种方法可以在用户单击锚点后禁止页面移至顶部？

Answer 1

您可以使用：

• Event.preventDefault() ，或
• return false

两者都具有防止内部锚链接的默认行为导航到页面顶部的效果。 示例用法，如之前在SO上所演示的 ：

var links = document.querySelectorAll("a"),
    pd = function(e) {
        e.preventDefault ? e.preventDefault() : e.returnValue = false;

    };

links.addEventListener('click', pd, false);

如果您使用的是jQuery，则可以这样做：

var links = $('a');
links.click(function(e) {
    e.preventDefault(); // Can be used anywhere
});

需要注意的重要一点是，如果选择使用return false ，它必须位于函数的最后一行，否则它将阻止所有下游代码的执行：

var links = $('a');
links.click(function() {
    // Your code here
    // ...

    return false; // Must be on the last line
});

也许一些睡前读书？

• 'return false;'之间的区别 和'e.preventDefault（）;'
• 什么时候以及为什么要在JavaScript中“返回假”？