Sler系SEの技術ブログ

選択されたオブジェクトをスクロールの一番上に表示 #JavaScript

kght6123

kght6123

選択されたオブジェクトをスクロールの一番上に表示 #JavaScript

スクロール内のオブジェクトについて、選択されたオブジェクトをスクロールの一番上に表示します。

初期表示時に、特定の位置まで自動スクロールを行いたかったので、作りました。

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() + '"]');