I'm using JQuery UI to make tabs in my application. I needed the tabs to be linkable (direct link that opens the page and selects the correct tab). This is done by using a hash tag/fragmented identifier. But I have a issue when the content above the tabs and inside the tabs is very long.
When clicking the tabs, the page scrolls down to the start of the tab. This is not what I want.
I'm using Jquery 1.7.1 and Jquery UI 1.8.16.
The javascript/Jquery code is a standard Jquery UI tabs with the addition to the event "tabsshow". This is suggested in Changing location.hash with jquery ui tabs (Stackoverflow question) and JQuery UI Tabs: Updating URL with hash while clicking the tab (blog - Tech Diary by Robin)
$(document).ready(function() {
$("#tabs").tabs();
/**
* Add hash to URL of the current page
*
* http://chwang.blogspot.com/2010/02/jquery-ui-tabs-updating-url-with-hash.html
* https://mcmap.net/q/360432/-changing-location-hash-with-jquery-ui-tabs
*/
$("#tabs").bind('tabsshow',function(event, ui) {
window.location.hash = ui.tab.hash;
});
});
The following HTML can be used to test the behavior
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<div style="height: 400px;">Some other content</div>
<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
<li class="ui-state-default ui-corner-top"><a href="#tab_1"><span>Tab 1</span></a></li>
<li class="ui-state-default ui-corner-top"><a href="#tab_100"><span>Tab 100</span></a></li>
<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tab_1000"><span>Tab 1000</span></a></li>
</ul>
<div id="tab_1" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
<table style="height: 1000px"><tr><td>Hello. This is tab 1</td></tr></table>
</div>
<div id="tab_100" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
<table style="height: 1000px"><tr><td>Hello. This is tab 100.</td></tr></table>
</div>
<div id="tab_1000" class="ui-tabs-panel ui-widget-content ui-corner-bottom"><h2>Heading</h2>
<table style="height: 1000px"><tr><td>Hello. This is tab 1000.</td></tr></table>
</div>
</div>
When opening the page with the following URL, one should have tab 1 opened and not scroll down to where the tab starts. The same goes for clicking on one of the tabs.
file.html#tab_1