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

How to stop a page from jumping to the top after clicking link

本文关键字：顶部 链接 单击 何阻止      更新时间：2023-09-26

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

视觉：https://i.stack.imgur.com/CZ3Y6.jpg

<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>

问：有没有办法在用户单击锚点后禁止页面移动到顶部？

您可以使用：

  • 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中"返回false"？
相关文章：