javascript、jQueryでスクロールを画面遷移しても保持する

目次

js、jQueryでスクロール位置を保持する

今回は、js、jQueryを使用して画面遷移しても対象要素のスクロール位置が保持される機能です。
早速ソースを見ていきましょう。

ソース

<script>
    $(function(){
        // 変数宣言
        let scroll_top = '';

        // ・画面表示時
        // 1.cookieから取得して変数へ格納
        scroll_top = $.cookie('scroll_top');

        // 2.cookie削除
        $.removeCookie(scroll_top);

        // 3.navタグのスクロール位置の指定
        $('nav').scrollTop(scroll_top);

        
        // navタグをスクロールしたときの処理
        $('nav').scroll(function() {
            // 1.navタグの垂直方向のスクロール位置の取得
            scroll_top = $('nav').scrollTop();

            // 2.cookieに保存
            $.cookie('scroll_top', scroll_top);
        });
    });
</script>

解説

cookieを使用してスクロールの位置を取得したり、保存したりします。

  • 画面表示時
    1. cookieに保存されているスクロール位置を取得して変数.scroll_topに格納
    2. cookieを削除する
    3. 対象要素(今回はnavタグ)のスクロール位置を指定する
  • スクロール時
    1. 対象要素の垂直方向のスクロール位置を取得して変数.scroll_topに格納
    2. cookieに変数.scroll_topを保存

初回画面表示時はスクロールされていないためcookieからの取得はありません。
画面表示後、スクロールされるとcookienにスクロール位置が保存され、画面遷移後も対象の要素のスクロール位置が保持されます。

  • URLをコピーしました!
目次