Linking to Jquery UI tab from external page scrolls to bottom of page

Question

When linking to a jqueryui tab from an external page, I use

<a href="page.html#tab-3">link</a> 

and this functions fine most of the time as the page loads with the respective tab displaying.

The issues start when I have a lot of content inside one of these tabs. When the page first loads the tab contents loads without jquery styling (as a long linear list) and then the jqueryui styles loads but I am scrolled to the bottom of the page.

I understand that I am scrolled to the bottom of the page because that is where the #tab-3 ID/NAME is on page load. How can I then link to the parent tab group rather than the ID I am linking to?

I would actually like to be scrolled about 50px above the tab group so our visitors can see which tab is selected.

I am using jquery 1.10.2 and jquery-ui-1.10.3.

Answer 1

When the page first loads the tab contents loads without jquery styling (as a long linear list)

First lets solve that loading problem...

A simple workaround to load your tabs a little nicer is to set display: none; on the tab's parent and then use .show() to make them appear once everything is nice and loaded like so:

#tabs {
    display:none;
}

 $(function () {
     $("#tabs").show().tabs();
 });

Now on to the main issue... Surprisingly this can be solved easily by adding a negative top margin and some padding to the tab's content

.ui-tabs .ui-tabs-panel {
    padding-top: 65px;
    margin-top: -50px;
}

Basically you're pulling the panel up with the negative margin and then pushing the content in the panel back down with the padding. This brings the top of the panels to the top of the tab widget and gives the pleasant side effect of letting the tab links rest comfortably in view when navigating to the page with a tab specified.

Working Example, external links to specific tabs
Working Example showing relevant code

Answer 2

There's a couple of ways to do this -- I was going to do examples but there already perfectly acceptable answers out there, so I'll just reference them.

First, instead of directly jumping to the tab in the URL you could pass a parameter in the URL that you can interpret and then activate that tab after the page is finished loading. Here's an answer showing that: Change Selected tab of jQuery UI tabs

Second, do what you're doing and then scroll to the correct place, that would be code like:

$(window).scrollTop($('div#tabs').offset().top)

you can play around with that to get the correct position. More here: jQuery: move window viewport to show freshly toggled element

Lastly, consider having the page load with (some of) the elements hidden and then change them to be visible in CSS after the page is ready. That should any oddness as the page loads.