Question

我有一个过滤器，当您尝试更改体验级别时，页面会进入最顶层。我的代码看起来像这样：

<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

两者都具有防止内部锚链接的默认行为导航到页面顶部的效果。示例用法，如demonstrated on SO before：

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

也许是睡前阅读？

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

1 个答案: