Page jumps to top when clicking new tab (jQuery Tabs)

Question

I am using jquery tabs with ajax.

Html:

<div id="tabs">
    <ul>
        <li><a id='tab-1' href="/get-1.htm">1</a></li>
        <li><a id='tab-2' href="/get-2.htm">2</a></li>
        <li><a id='tab-3' href="/get-3.htm">3</a></li>
    </ul>
</div>

jquery:

$( "#tabs" ).tabs({
    beforeLoad: function( event, ui ) {
        ui.jqXHR.error(function() {
            ui.panel.html
            (
                "bla bla bla";
            );
        });
    }
});

Gif showing the problem:

<!----------------------- IMAGE START ----------------------->

<!----------------------- IMAGE END ----------------------->

For more smoothier check this link (select mp4): click me

I clicked 2nd tab, page jumped to top. Another example:

<!----------------------- IMAGE START ----------------------->

<!----------------------- IMAGE END ----------------------->

more smoothier

Note (2nd example) that if I already opened tab earlier (was on 1st, pressed 2, jumped, pressed 1, no jump).

How I can solve this problem?

UPDATE

Sad, but example https://jqueryui.com/tabs/ is working fine :( There are no same bug.

Answer 1

When you click on a tab that has less content than the current tab, the overall height of the page changes which can affect the scroll position of the page. One way to "fix" this is to use the heightStyle option and set it to "auto", however I'm not entirely sure how that is going to work with ajax tabs.

http://api.jqueryui.com/tabs/#option-heightStyle

$( ".selector" ).tabs({ heightStyle: "fill" });

Sample: http://jsfiddle.net/4uhjF/ Click on tab one, scroll down until you can't see the h1, then click on tab 2. Because tab2 has far less content, the height of the page changes enough to cause a jump to top. The only way around this is to ensure that the content of all tabs have a similar height, or to set the height to a specific number and use scrolling for anything larger than that height. heightStyle: "fill" would be the best in your case because you can then set the height of the parent element of the tab container to control the height of the ajax-loaded tabs.