ブラウザのスクロール位置を復元してみる

シングルページ内でのスクロール位置の保持、復元してみます
シングルページで他ページへ移動後、元ページへ戻ってきてスクロール位置が復元されていないと"イラッ"とします
スクロール位置の保持と復元用クラスを作成してみます

/Src/cm.ts

class ScrollPos {
    private _value = 0;
    private _target: JQuery;

    constructor(selector?: string | JQuery) {
        // 対象無しはドキュメント対象
        if (typeof selector !== "undefined") {
            this._target = $(selector);
        }
    }

    /*
     * スクロール位置取得
     */
    getScrollValue(): number {
        if (this._target) {
            return this._target.scrollTop();
        } else {
            return document.documentElement.scrollTop || document.body.scrollTop;
        }
    }

    /*
     * スクロール実行
     */
    doScroll(value?: number) {
        if (typeof value === "undefined") {
            value = this._value;
        }
        if (this._target) {
            this._target.scrollTop(value);	// 対象BOX位置
        } else {
            $.mobile.silentScroll(value);	// ドキュメント位置
        }
    }

    /*
     * 設定値設定
     */
    setValue(value?: number) {
        if (typeof value === "undefined") {
            value = this.getScrollValue();  // 現在のスクロール位置
        }
        this._value = value;
    }

    /*
     * 設定値参照
     */
    getValue(): number {
        return this._value;
    }
}

• コンストラクタ 対象を指定、無い場合はdocument
• getScrollValue 対象の現在のスクロール位置を取得
• doScroll 指定位置、もしくは保持された位置へスクロール
• setValue スクロール位置を保持、引数がない場合は現在位置を保持
• getValue 保持されている値を取得

サンプルではHandsontableのスクロール位置保持と合わせて位置復元します
自ページ移動前に位置を保持しています
/Src/mobile.ts

    namespace Page1 {
    
    ....

        let _pos = new ScrollPos();

        ....

        $(document).on("pagecontainershow", function (event: Event, ui: any) {

            ....

            $(window).resize();
            _pos.doScroll();	// スクロール位置復元
            mq.update();
        });

	/*
	 * ページ終了前
	 */
        $(document).on("pagecontainerbeforehide", function (event: Event, ui: any) {
            if (cm.getPrevPageId(ui) !== "page1") {
                return;
            }
            _pos.setValue();	// スクロール位置保持
        });

        ....

    }

    namespace Page2 {

        ....

        let _pos: number[] = [];				// 現在位置

        ....

	/*
	 * ページ表示前
	 */
        $(document).on("pagecontainerbeforeshow", function (event: Event, ui: any) {
            if (cm.getToPageId(ui) !== "page2") {
                return;
            }
            if (_ht) {
                Ht.initData(_ht);
                _ht.render();
            }
        });
	/*
	 * ページ表示
	 */
        $(document).on("pagecontainershow", function (event: Event, ui: any) {

            ....

            Ht.setCurrentRowColPos(_ht, _pos);	// 位置復元
            _ht.render();							// 再描画
            mq.update();
        });
	/*
	 * ページ終了前
	 */
        $(document).on("pagecontainerbeforehide", function (event: Event, ui: any) {
            if (cm.getPrevPageId(ui) !== "page2") {
                return;
            }
            if (_ht) {
                _pos = Ht.getCurrentRowColPos(_ht);
            }
        });
    }