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

Question

I have an anchor link with mailto:example@email.com as href, but it jumps to the top of the page when it is clicked. I want to prevent that from happening.

I tried e.preventDefault() in my js, which works but has the problem that it won't open the email client anymore.

scenario:

I have a "Get in Touch" link at the bottom of my page. It should open the email client (which is working). The problem is that it jumps to top of page everytime it is clicked. Is there a way to prevent that from happening?

here is what the anchor link look like:

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

here is what I tried already.

$(".get-in-touch").on("click",function(e){
    e.preventDefault();
    window.location.href = $(this).attr("href");
});

but that didn't work. Still jumps to top of page.

Please put together a [minimal, complete and verifiable example](https://stackoverflow.com/help/mcve) of the problem so that we can see exactly the problem you are having and may attempt to help you out. — Jake Conkerton-Darby, Jul 04 '18 at 10:49
use `e.preventDefault()` on the `click` event and then use `window.location.href="your link"` in the same event — Code_Ninja, Jul 04 '18 at 12:32
@Code_Ninja already tried that it didn't work, still jump to top of page. — sandyff, Jul 05 '18 at 06:55
@Code_Ninja thanks for the response, if you have other ideas please let me know, I would really appreciate it. Thanks! — sandyff, Jul 05 '18 at 07:07
Try using `window.location.assign("your URL")` instead of `window.location.href` in the suggestion given above by me. — Code_Ninja, Jul 05 '18 at 07:19

Code_Ninja · Accepted Answer · 2018-07-06T04:54:44.070

0

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.

edited Jul 06 '18 at 04:54

answered Jul 05 '18 at 10:25

Code_Ninja

1,729
1
14
38

It works , thanks a lot. Really appreciate the effort – sandyff Jul 05 '18 at 15:00
If you have found a solution, then please select an answer or upvote/downvote it. – Code_Ninja Jul 06 '18 at 04:55

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

1 Answers1

Linked