Sler系SEの技術ブログ
選択されたオブジェクトをスクロールの一番上に表示 #JavaScript
kght6123
スクロール内のオブジェクトについて、選択されたオブジェクトをスクロールの一番上に表示します。
初期表示時に、特定の位置まで自動スクロールを行いたかったので、作りました。
JQueryを利用しています。
// スクロール内の指定したセレクタの位置まで、スクロールする関数
function scrollTopPointingSelector(_scrollSelector, _pointingSelector)
{
var $pointingEl = $(_pointingSelector);
var $scrollEl = $(_scrollSelector);
if($pointingEl.length > 0 && $scrollEl.length > 0) {
// 指定されたセレクタが存在する場合に、指定位置までスクロールする
var pointObjOffsetTop = $pointingEl.offset().top;
var scrollObjOffsetTop = $scrollEl.offset().top;
var scrollObjScrollTop = $scrollEl.scrollTop();
// topの差分を取り、現在のスクロールの位置に加算する
var updateScrollTop = pointObjOffsetTop - scrollObjOffsetTop + scrollObjScrollTop;
// スクロール位置を更新
$scrollEl.scrollTop(updateScrollTop);
}
return updateScrollTop;
}
// 初期表示時に#task-tableの前回選択されたTRの位置まで、スクロールする
scrollTopPointingSelector('#task-scroll-div', '#task-table TR[index="' + $("#selected-task").val() + '"]');