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

时间:2015-01-29 23:05:59

标签: javascript html css

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

视觉: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>

问题:有没有办法在用户点击锚点后禁止页面移动到顶部?

1 个答案:

答案 0 :(得分:1)

您可以使用:

两者都具有防止内部锚链接的默认行为导航到页面顶部的效果。示例用法,如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
});

也许是睡前阅读?