About

本サイトについて

趣味で開発したプログラムや開発メモを載せています。
ソースコードはGithubで公開しつつ、なるべく後から分かるように解説に努めてますので、
誰かのお役に立てれば嬉しいです。

プロフィール

kght6123

佐賀県出身で1985年生まれ。
三重県四日市市在住のシステムエンジニア。家庭を大事にしたい2児の父。

kght6123.page

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

2022-06-07T14:10:56.476Z

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

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

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