JScrollPaneについて

質問

下記のサンプルページのように、JScrollPaneとuiのtabを組み合わせたものをつくろうと思っています。
http://www.kelvinluck.com/assets/jquery/jScrollPane/tabs_example.html

試行錯誤の末、なんとかサンプルと同じようなものができたのですが、ページ内リンクみたいなものを使って、指定した位置にスクロールを移動させるようなことはできるのでしょうか？色々と試しては見たのですがどうもキレイにできません。

詳しい方、どうかご教授願います。

回答No.1

my--

質問者さんが色々と試した内のひとつかも知れませんが
提示のサンプルページをすこし触ってみました。

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を外すとすこしは安定するみたいです。（回答にはなってませんけど）