How to Prevent a Click on a '#' Link from Jumping to Top of Page

How to prevent a click on a '#' link from jumping to top of page?

In jQuery, when you handle the click event, return false to stop the link from responding the usual way prevent the default action, which is to visit the href attribute, from taking place (per PoweRoy's comment and Erik's answer):

$('a.someclass').click(function(e)
{
    // Special stuff to do when this link is clicked...

    // Cancel the default action
    e.preventDefault();
});

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

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?

• The difference between ‘return false;’ and ‘e.preventDefault();’
• When and why to 'return false' in javascript?

How to prevent page from jumping to top of page with mailto link in an anchor?

Instead of writing:

<a class="get-in-touch" href="mailto:email@gmail.com">Get In Touch</a>

Write the following:

<a class="get-in-touch" href="#" onclick="window.open('mailto:email@gmail.com')">Get In Touch</a>

This will work surely.

Here is another stackoverflow question regarding your problem.

Here is the link to the jsfiddle.

How do I stop a web page from scrolling to the top when a link is clicked that triggers JavaScript?

You need to prevent the default action for the click event (i.e. navigating to the link target) from occurring.

There are two ways to do this.

Option 1: event.preventDefault()

Call the .preventDefault() method of the event object passed to your handler. If you're using jQuery to bind your handlers, that event will be an instance of jQuery.Event and it will be the jQuery version of .preventDefault(). If you're using addEventListener to bind your handlers, it will be an Event and the raw DOM version of .preventDefault(). Either way will do what you need.

Examples:

$('#ma_link').click(function($e) {
    $e.preventDefault();
    doSomething();
});

document.getElementById('#ma_link').addEventListener('click', function (e) {
    e.preventDefault();
    doSomething();
})

Option 2: return false;

In jQuery:

Returning false from an event handler will automatically call event.stopPropagation() and event.preventDefault()

So, with jQuery, you can alternatively use this approach to prevent the default link behaviour:

$('#ma_link').click(function(e) {
     doSomething();
     return false;
});

If you're using raw DOM events, this will also work on modern browsers, since the HTML 5 spec dictates this behaviour. However, older versions of the spec did not, so if you need maximum compatibility with older browsers, you should call .preventDefault() explicitly. See event.preventDefault() vs. return false (no jQuery) for the spec detail.

Prevent going to top of page after link click

try

<a href="#" onclick="resendCode(); return false;" class="btn btn-link btn-sm">Resend</a>

to prevent the scrolling

Avoid window jump to top when clicking #-links

You need to add preventDefault() to your click handler. This will stop the browser executing it's own link handler, and will only run the code you specify.

Example:

$("#myID").click(function(e) {
    e.preventDefault();
    // Do your stuff
});

href=# Going to Top of Page - Prevent?

In your event handler, add e.preventDefault(); (assuming e is the name of the variable holding the event):

$('.service').click(function(e) {
    e.preventDefault();
});

---

Related Topics