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.

How can I prevent this from happening?

Please see this example:

http://5bosses.com/examples/tabs/sample_tabs.html

Solution 1

If you're animating your tab transitions (ie. .tabs({ fx: { opacity: 'toggle' } });), then here's what's happening:

In most cases, the jumping isn't caused by the browser following the '#' link. The page jumps because at the midpoint of the animation between the two tab panes, both tab panes are fully transparent and hidden (as in display: none), so the effective height of the whole tabbed section becomes momentarily zero.

And if a zero-height tabbed section causes the page to be shorter, then the page will appear to jump up to compensate, when in reality it's simply resizing to fit the (momentarily) shorter content. Makes sense?

The best way to fix this is to set a fixed height for the tabbed section. If this is undesirable (because your tab content varies in height), then use this instead:

jQuery('#tabs').tabs({
    fx: { opacity: 'toggle' },
    select: function(event, ui) {
        jQuery(this).css('height', jQuery(this).height());
        jQuery(this).css('overflow', 'hidden');
    },
    show: function(event, ui) {
        jQuery(this).css('height', 'auto');
        jQuery(this).css('overflow', 'visible');
    }
});

It will set the computed height of the pane before the tab transition. Once the new tab has appeared, the height is set back to 'auto'. Overflow is set to 'hidden' to prevent content from breaking out of the pane when going from a short tab to a taller one.

This is what worked for me. Hope this helps.

Solution 2

If you have something along these lines:

<a href="#" onclick="activateTab('tab1');">Tab 1</a>

Try adding return false; after the tab activation command:

<a href="#" onclick="activateTab('tab1'); return false;">Tab 1</a>

Solution 3

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

Solution 4

My guess is that you are animating your tab transitions? I am having the same problem, where the page scroll jumps back to the top with every click.

I found this in the jquery source:

 // Show a tab, animation prevents browser scrolling to fragment,

Sure enough, if I have this:

$('.tab_container > ul').tabs();    
$('.tab_container > ul').tabs({ fx: { height: 'toggle', opacity: 'toggle', duration: 'fast' } });

my code jumps to the top and is annoying (but there's animation). If I change that to this:

$('.tab_container > ul').tabs();    
//$('.tab_container > ul').tabs({ fx: { height: 'toggle', opacity: 'toggle', duration: 'fast' } });

there is no tab animation, but switching between tabs is smooth.

I found a way to make it scroll back, but it's not a proper fix, as the browser still jumps to the top after clicking a tab. The scroll happens between the events tabsselect and tabsshow, so the following code jumps back to your tab:

var scroll_to_x = 0;
var scroll_to_y = 0;
$('.ui-tabs-nav').bind('tabsselect', function(event, ui) {
    scroll_to_x = window.pageXOffset;
    scroll_to_y = window.pageYOffset;
});
$('.ui-tabs-nav').bind('tabsshow', function(event, ui) {
    window.scroll(scroll_to_x, scroll_to_y);
});

I'll post any more progress I make.

Solution 5

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();
 });

View more solutions

Comments

[keithjgrant]

This didn't work for me when the contents of each tab are pulled via ajax. Only after the initial load of a tab does that tab stop jumping to the top.

[Tomas]

This solution doesn't work if the target page is short - then the screen will jump to the top anyway. See solution in my answer - seems to work in all situations. Nevertheless big thanks Mike for revealing the principle of the problem! Without being inspired by you, I wouldn't be able to do it!

[Shawn J. Molloy]

Very very nice solution; smooth tab transitions that totally solve the ops question. Award this man the answer!

[Ivan Virabyan]

he is talking about jquery-ui, not some custom implementation of tabs