jQuery UI Tabs - show option resets windows position

Question

When I use tabs in jQuery UI with simple template like this:

<div id="products-tabs">
    <ul>
        <li><a href="#product-1">Product 1</a></li>
        <li><a href="#product-2">Product 2</a></li>
    </ul>

    <div id="product-1">
        Product 1
    </div>
    <div id="product-2">
        Product 2
    </div>
</div>

JS:

$('#products-tabs').tabs();

Then everything works fine. But I want to add effect of different swaping between tabs. For example like this:

$('#products-tabs').tabs({
    show: { effect: "fadeIn", duration: 800 }
});

It works, but when I have the tabs at the bottom of the page, then when I click on one of the tabs the position of the window resets back to top. How can I prevent it?

Fiddle here: http://jsfiddle.net/46a8y/3/ (just scroll to the bottom in output window to see what I mean)

Answer 1

Update your jquery version, jquery 2.1.0 or 1.9.1 work fine.

Answer 2

after a tab is activated you can call an callback to jump to the bottom of your page?

activate: function(){
    $("html, body").animate({ scrollTop: $(document).height() }, 1000);
}

like this: http://jsfiddle.net/46a8y/4/

Answer 3

Wrap your tabs div inside another fixed-height div:

<div id="wrapper">your tabs</div>

jsfiddle