Web アプリケーションにおいて、入力項目が一画面に収まらないような入力フォームの場合、入力値の一時保存ボタンが必須になるかと思いますが、通常の作りだと保存処理後、ページスクロール位置が先頭に戻ってしまうのが悩みどころです。Ajax で実装すれば解決もできますが、もっと手軽に解決できる方法がないか考えてみました。

保存処理前にスクロール位置を記録し、ページリロード時に位置調整する

まず考えたのが、保存処理（SUBMIT）前のスクロール位置を jQuery Cookie プラグイン（https://github.com/carhartl/jquery-cookie）で保存しておき、ページがリロードされたら cookie に記録された位置にスクロール位置を補正するという方法。

//プラグイン化
$.fn.keepPosition = function(){
    //cookieに保存する名前（他のページと競合しないようURLを含めるようにする）
    var key = 'keep-position-'+location.pathname;
    var win = $(window);
    this.each(function(){
        $(this).on('submit',function(){
            $.cookie(key, win.scrollTop());
        });
    });
    setTimeout(function(){
        win.scrollTop($.cookie(key));
    },0);
}
 
//実行
$('form').keepPosition();

この実装で一見うまくいくように見えますが、入力フォーム画面の呼び出しを複数回行った場合、前回の呼び出し時の cookie の値が残っているため、入力フォーム画面を呼び出したタイミングでも、ページがスクロールした状態になってしまうという事が起きてしまいます。

unload イベントで cookie をクリアする

入力フォーム画面を呼び出す度に常に cookie をクリアすれば、問題は解決しますが複数画面から呼び出されるような構成の場合、保守性がよろしくありません。そこで unload イベントが使えないか考えてみました。

unload イベントはウィンドウやタブが閉じられた場合、ページ内で自ページに対し SUBMIT された場合等に発生します。ここでは、SUBMIT 時は cookie をクリアしたくないので、フラグを使用し SUBMIT 以外の unload イベント時にのみ cookie をクリアするようにしてみました。

b

とりあえず問題なさそうです。かゆいとこが出てきたらちょくちょく修正してこうかと思います。

• jquery.keep-position.js – GitHub

その他の jQuery Cookie プラグインの活用事例

jQuery Cookie プラグイン の活用事例がいろいろまとめられてます。ご参考までに。

• jQueryでcookieを簡単に使える「jQuery Cookie」のまとめ – 小粋空間
• JavaScriptでcookieを操作する時はjquery.cookie.jsを使おう – 文殊堂
• jquery.cookieでjsオブジェクトをJSONで保管するメモ – すたら日記
• jQueryとjquery.cookie.jsを使って開閉を保持するメニューを作ってみる – caraldo.net
• jQueryでフォームの内容をCookieに保存する – ITかあさん
• jQueryで「jquery.cookie.js」を使ってページの初回アクセスのみ処理を変える方法 – BlackFlag
• jQuery Cookieプラグインの保存期間を1時間や30分にする方法 – iwb.jp