画面内に配置したスクロール可能なテーブルをクリックイベントで自動スクロールさせる

画面内に配置したスクロール可能なテーブルをクリックイベントで自動スクロールさせる

jQueryを使った自動スクロールで少し詰まったのでメモしておきます。

画面内の何かしらの要素に向かって自動スクロールするには以下のようにすれば良いらしいです。

var p = $('#hogehoge').offset().top;
$('html,body').animate({ scrollTop: p }, 'fast');

自分では試していないですが、色んな所に書いてありました。
1行目で目的要素のy座標を取得し、2行目でbody全体を目的要素に向かってスクロールさせています。

今回はbody全体をスクロールするのではなく、body内に配置したテーブル内でスクロールを行いたいと考えました。

試行錯誤の末辿り着いた手順は以下のとおり。
①目的のオブジェクト(#hogehoge)のy座標を取得
②テーブル(#hogehoge-table)の現在スクロール位置を取得
③テーブルの画面上の位置を取得
④ ①+②-③を計算
⑤スクロール処理

var row_top       = $('#hogehoge-'+this.id).offset().top;
var table_top     = $('#hogehoge-table').offset().top;
var table_now_pos = $('#hogehoge-table').scrollTop();
var scroll_to     = table_now_pos + row_top - table_top;
$('#hogehoge-table').animate({ scrollTop: scroll_to }, 'fast');

画面上のテーブルの位置と、テーブルの現在のスクロール位置を考えなきゃいけないんですね。。