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

Question

I have a filter and when you try to change the level of experience the page goes to the very top. my code looks like this:

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

Question: Is there a way to disable the page from moving to the top after the user clicks on the anchor?

Step 1. intercept the click with javascript Step 2. Store current scroll position in a cookie/localstorage Step3 create a onload page event in javascript step4 fetch the scoll value from cookie/localstore and set it with javascript — Gillis Haasnoot, Jan 29 '15 at 23:08

score 1 · Accepted Answer · edited May 23 '17 at 12:12

You can use:

Event.preventDefault(), or
return false

Both will have the effect of prevent the default behavior of internal anchor links from navigating to the top of the page. Example usage, as has been demonstrated on SO before:

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

    };

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

If you're using jQuery, you can do it like this:

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

Important to note that if you choose to use return false, it has to be on the last line in the function, otherwise it will stop all downstream code from being executed:

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

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

Perhaps some bedtime reading?

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

1 Answers1