page jumps on click of tag in IE, jquery is attached to the a href

Question

I have four links with href's pointing to URLs of pages that are loaded via .load(), the problem is in IE the page jumps when you click it, i have attached a (window).scrollTo(0) to the code and fixes it in all browsers besides IE.

I also have return false on the code so it stops the default behaviour.

I have seen: Page jumps to the top onclick and tried implementing the answers but it just doesn't seem to work for me.

Does anyone know a solution ?

the href's:

<a href="welcome.html" name="welcome">Welcome</a>
<a href="about.html" name="about">About</a>
<a href="forum.html" name="forum">Forum</a>
<a href="contact.html" name="contact">Contact</a>

jQuery Code:

    $('#jqNav li a').click(function(e){

    if($(this).parent().is(".nav1")){ $('.landing .main .nav ul').css({ "background-position" : "0 -50px" });} 
    else if($(this).parent().is(".nav2")) { $('.landing .main .nav ul').css({ "background-position" : "0 -100px" });}
    else if($(this).parent().is(".nav3")) { $('.landing .main .nav ul').css({ "background-position" : "0 -150px" });}
    else if($(this).parent().is(".nav4")) { $('.landing .main .nav ul').css({ "background-position" : "0 -200px" });};

    stopAnim = true;
    $page = $(this).attr('href');
    var $hashTag = $(this).attr('name');
    window.location.hash = $hashTag;
    loadData();
    $(window).scrollTop(0);
    e.preventDefault();

});

What's in `loadData`? If it's asynchronous code, that could be the problem. — lonesomeday, Jun 23 '11 at 18:09
loadData is a call to animations and a .load() call to the page (href) and a div within that page — Xavier, Jun 23 '11 at 18:12
Curious as to why `$(window).scrollTop(0);` is in there twice. With jQuery, each line does not execute sequentially. I also believe that `e.preventDefault();` is typically declared first. — Sparky, Jun 23 '11 at 18:12
i called it twice to see if it fixed it in IE that should of been removed sorry lol — Xavier, Jun 23 '11 at 18:13
Could it be that the `a` tags have a `name` attribute? I wonder if IE is interpreting that as a page anchor as well as a hyperlink. It might be worth trying `id` attributes instead? — Tak, Jun 23 '11 at 18:18
These lines do not execute sequentially. What if `window.location.hash = $hashTag;` is called **before** the variable is defined here: `var $hashTag = $(this).attr('name');` ? — Sparky, Jun 23 '11 at 18:21
@Sparky672 i dont have that issue it loads the hastag name onto the page — Xavier, Jun 23 '11 at 18:28
@Xavier: I'm not saying **you** have the issue. But your code is being executed on many different clients so I can certainly see this being an issue for somebody. — Sparky, Jun 23 '11 at 18:30
@Xavier: In regular JavaScript, your code is executed line by line in the same order in which you wrote it, where the next line will not run until the previous line has finished. jQuery does not work like that... each line is executing independently. — Sparky, Jun 23 '11 at 20:21

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

To answer my own question;

What was happening was window.location.hash was generated from the <a name="hash name"> so the browser was pushing the page to my element on the page.

What i did was removed the name element from the anchor tags and pushed the names in via jQuery. As i only had 4 anchor tags it was the easiest solution for my scenario, how ever if you are referencing lots of hash tags and wish to stop it from jumping i found another post on Stack Overflow with some great answers.

Modifying document.location.hash without page scrolling

page jumps on click of tag in IE, jquery is attached to the a href

1 Answers1