質問者さんが色々と試した内のひとつかも知れませんが
提示のサンプルページをすこし触ってみました。
var tabs = $('#tab-me').tabs();
var tabAnchors = tabs.find('a');
var panes = $('.scroll-pane').jScrollPane();
// <a href="#p1" class="page-links">#p1</a>
$('.page-links').bind('click', function() {
var id = this.hash;
// id要素探索
tabAnchors.each(function(i) {
var target = $(this.hash).find(id); // id要素抽出
if (target.length > 0) { // 要素があれば
tabs.tabs('select', i); // タブ選択
panes[i].scrollTo(id); // スクロール
return false; // 探索終了
}
});
return false;
});
こんな感じで良かろうと思ったんですが、見込み違いでかなり不安定です。
jScrollPaneとUI tabs（CSS絡み？）の相性が悪いのか、普通にやってもダメっぽい。（私はお手上げ）
因みに。
var tabs = $('#tab-me').tabs();
var tabAnchors = tabs.find('a');
//var panes = $('.scroll-pane').jScrollPane();
//<a href="#p1" class="page-links">#p1</a>
$('.page-links').bind('click', function() {
var id = this.hash;
// id要素探索
tabAnchors.each(function(i) {
var target = $(this.hash).find(id); // id要素抽出
if (target.length > 0) { // 要素があれば
tabs.tabs('select', i); // タブ選択
var parent = target.parent();
var positionP = parent.position(); // 親要素位置オブジェクト
var positionT = target.position(); // id要素位置オブジェクト
parent.scrollTop(positionT.top - positionP.top + parent.scrollTop()); // スクロール
return false; // 探索終了
}
});
return false;
});
jScrollPaneを外すとすこしは安定するみたいです。（回答にはなってませんけど）
