0

little annoying issue here. My hide function makes the page jump to top:

 $(".home .options .tabs ul li").click(function(event){
    $("#wrapper .home .aba").hide();

    var qual = $(this).attr("ref");

    $(".content.home .options .tabs ul li").removeClass("active");
    $(this).addClass("active");

    $("#"+qual).show();

    return false;
});

If i remove it, it works pretty well. Whats happening?

After i click on each tabs, the issue stops. But when i refresh the page, come back.

Thanks!

Lucas Veiga
  • 1,758
  • 7
  • 27
  • 45
  • I'm confused. The jQuery selector is for an `
  • `, but then you have `$(this).attr('hfef')` as if it were a link. What gives?
    • – Ayman Safadi Jan 04 '12 at 13:19
  • Note that is a ref, not a href. – Lucas Veiga Jan 04 '12 at 13:28
  • Ah... touché. My bad. On a separate note, can we see your markup? – Ayman Safadi Jan 04 '12 at 13:34
  • Yea. Everything works fine but the hide. It oddly jumps the page. If i remove it, works. – Lucas Veiga Jan 04 '12 at 13:45
  • 1
    More than likely, after hiding, the page is much shorter than it is when it is visible. This resultis in no scroll bars, which means the page gets scrolled to the top. Without markup we'll never know. – Kevin B Jan 04 '12 at 14:51
  • Following on from @KevinB (which is most likely the cause), try putting the `.hide()` call on the line following the `.show()`. This will allow you to test whether it's a page size issue (as the page will grow in size and then shrink again - probably too fast for you to notice). – Blair McMillan Jan 06 '12 at 05:14