0

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.

tim
  • 198
  • 2
  • 15
  • 1
    You need `` (you were sending the browser to something like `http://yoursite.com/www.weather.com`) –  Oct 02 '19 at 17:58
  • @ChrisG In the future, sometimes it's best not to remove the jQuery tag on JavaScript questions, even if the question doesn't explicitly mention it; it's an alternative way for OP to signal that they're open to answers that use jQuery. – Tyler Roper Oct 02 '19 at 18:00
  • @TylerRoper True; I briefly thought about re-adding it before submitting the edit but didn't in the end. It doesn't seem particularly relevant to this question. –  Oct 02 '19 at 18:03
  • `href=https://www.weather.com` Are you missing the `" "` around `https://www.weather.com`? It should be `href="https://www.weather.com"`. Aside from that, I can't recreate this anywhere; clicking an `` to an external site doesn't jump on the page; it just navigates as expected. – Tim Lewis Oct 02 '19 at 18:07
  • @TimLewis - I just updated the post, I do supply the quotes. – tim Oct 02 '19 at 18:09
  • I guessed as much, but had to check. Note about being unable to reproduce still stands though... Are you able to provide a live example to demonstrate this? – Tim Lewis Oct 02 '19 at 18:10
  • @TimLewis - No problem, I appreciate it. The frustrating part is that I can't reproduce it locally, but when another person integrates it into their page, I do see it, but it's not public facing. – tim Oct 02 '19 at 18:12
  • 1
    It is invalid to have a self closing anchor tag, for one thing. Where is the anchor text? This is not normal behavior which makes me think something is missing from the information. The context of where that tag is in the page would be useful. – AFOC Oct 02 '19 at 18:45

2 Answers2

0

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

user95227
  • 1,853
  • 2
  • 18
  • 36
0

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
 }
vipul patel
  • 668
  • 4
  • 7
  • I'm able to go to me link in the code I supplied, but it still jumps. I believe the issue is focus related. – tim Oct 03 '19 at 15:56
  • @tim I just edited my post. Main part was missing I think my anchor tag code did not reflect in post. Just edited. Try it out – vipul patel Oct 03 '19 at 16:02