How to stop html page from jumping when anchor is clicked, but still go to the url in the href?

Question

I know that this issue seems similar to many that preceded it, but the main difference is that I still want to go to the url that's in the anchor's href and direct them to another page.

Here's my code: <a class="tile" href="https://www.weather.com">weather<a/>

When the anchor is clicked, it jumps to the top of the page right before the user is redirected to the url in the href

I've tried adding this to the JS to resolve it, but to no avail.

this.el.addEventListener('click', (e) => {
    e.preventDefault();
    window.location = this.el.getAttribute('href');
}, false);

Any help would be appreciated.

Answer 1

You shouldn't need that javascript but simply try adding the http protocol to the front of your url. For example: <a class="tile" href="https://www.weather.com" />

This post explains why. Without specifying a protocol, the link will be relative to the current request URI

Answer 2

It should not Jump. However in your case if it jumps then use dud href and then click event on that:

<a class="tile" href="javascript:void(0)"  onclick='redirect(event)'>weather<a/>

in Script: i think in your example you are missing: window.location. href

 function redirect(e){
    e.preventDefault();
    window.location.href = "https://www.weather.com"; // notice href
 }