JQuery UI Tabs Causing Screen to “Jump”

Question

I\'m using the latest version of the jQuery UI tabs. I have tabs positioned toward the bottom of the page.

Every time I click a tab, the screen jumps toward the top

Answer 1

I had the same problem with jquery ui's menu - a preventDefault() on the anchor's click event stops the page from scrolling back to the top:

 $("ul.ui-menu li a").click(function(e) {
      e.preventDefault();
 });

Answer 2

There is a much more simple way which I discovered from the comments on this page that is to simply remove the href="#" and it will not jump to the top any more! I verified and it works for me. Cheers

Answer 3

replace the href="#" with href="javascript:void(0);" in 'a' element

works 100%

Answer 4

I was given a solution for this...

How to stop screen from jumping up when tab is clicked:

Wrap the div that contains the tabs in a div with a fixed height.

See example here: http://5bosses.com/examples/tabs/sample_tabs.html

Answer 5

I prefer to have an href="#" in my links that do not take the user anywhere, but you can do this as long as you add an onclick="return false;". The key, I guess, is not sending the user to "#", which depending on the browser seems to default as the top of the current page.

Answer 6

I had such a problem. My code was:

$("#tabs").tabs({
  hide: {
    effect: "fade",
    duration: "500"
  },
  show: {
    effect: "fade",
    duration: "500"
  }
});

I have simply removed show and it worked like a charm!

 $("#tabs").tabs({
      hide: {
        effect: "fade",
        duration: "500"
      }
 });