multiple jquery ui tabs - target one tab from another page

Question

I'm using jQuery tabs on a long home page (scrolling down). The page has 3 sections which each use tabs and the viewer scrolls down to each section.

I want to target specific tabs from other pages which works fine if the tabs are at the top of the page. If the tabs are down the page the link opens the correct tab but the page is at the top so until you scroll down you can't see the intended content.

I'm using jQuery tabs in it's most simple form:

$('#tabs-mcr > ul').tabs();
$('#tabs-lpool > ul').tabs();
$('#tabs-bham > ul').tabs();

Is is possible to find the height from the top of the window or the position of the targeted tabs on the page and jump to that position when the link is clicked...?

P.S. I'm already using $(window).scrollTop(); to scoll down to each of the tab sections via the main navigation – if that could be utilised with targeting the tabs that would be ideal!

Answer 1

Try the jQuery scrollTo plugin.

http://ajaxian.com/archives/jquery-scrollto-plugin