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)
Update your jquery version, jquery 2.1.0 or 1.9.1 work fine.