Q:

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

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. 

A:

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

