フォームデータ登録後もページスクロール位置を維持する方法を考えてみた

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

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

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

  1. //プラグイン化
  2. $.fn.keepPosition = function(){
  3. //cookieに保存する名前(他のページと競合しないようURLを含めるようにする)
  4. var key = 'keep-position-'+location.pathname;
  5. var win = $(window);
  6. this.each(function(){
  7. $(this).on('submit',function(){
  8. $.cookie(key, win.scrollTop());
  9. });
  10. });
  11. setTimeout(function(){
  12. win.scrollTop($.cookie(key));
  13. },0);
  14. }
  15.  
  16. //実行
  17. $('form').keepPosition();

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

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

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

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

b

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

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

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