CYOKODOG

JS DEVELOPER BLOG

ページのスクロール位置を維持したままフォーム送信やページ切り替えができる jQuery プラグイン

  • 2013-12-03

Keep Position は、ページのスクロール位置を維持したまま、フォーム送信処理やページ切替処理をできるようにする jQuery プラグインです。Ajax なんかでかっつり作り込んでらんないなぁって時に使うと便利です。

使い方

jQuery、jQuery Cookie、jQuery Utility Kit（または Keep Position）の JS ファイルを読み込みます。

BACKRAW
  1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  2. <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.3.1/jquery.cookie.min.js"></script>
  3. <script src="jquery.utility-kit.js"></script><!-- または jquery.keep-position.js -->

以下のいづれかの方法で keepPosition() メソッドを実行すると、ページリロード後もスクロール位置が維持されたままとなります。

BACKRAW
  1. // form 要素に対し適用
  2. $('form').keepPosition();
  3.  
  4. // a 要素に対し適用
  5. $('a').keepPosition();
  6.  
  7. // 現在の URL でリロード
  8. $.keepPosition.reload();

タブＵＩで使用する

以下のような非 Ajax ベースなタブＵＩの画面で使用すると便利です。

BACKRAW
  1. <ul class="nav nav-tabs">
  2.     <li><a href="?home">Home</a></li>
  3.     <li><a href="?profile">Profile</a></li>
  4.     <li><a href="?message">Messages</a></li>
  5. </ul>

タブのリンクに対し適用します。

BACKRAW
  1. $('ul.nav-tabs a').keepPosition();

Tab UI

Demo

スクロールした状態でタブをクリックしてみてください。スクロール位置が維持されたままタブの切り替えが行われます。

入力フォームで使用する

情報量の多い入力フォームの一時保存機能と連動して使用すると便利です。

BACKRAW
  1. <form class="sample" action="demo.html">
  2.     <input type="text" name="sample-val" class="form-control"/><br/>
  3.     <input type="submit" class="btn btn-success" value="SAVE"/>
  4. </form>

form 要素に対し適用します。

BACKRAW
  1. $('form.sample').keepPosition();

post

Demo

更新処理と連動する一覧表示画面で使用する

一覧表示画面において、「選択データを iframe 対応の LightBox 系プラグインの編集画面で開き、変更／保存保存後、編集結果を一覧画面に反映」といった処理は業務システムではありがちかと思いますが、ＤＢ格納データを再取得して一覧画面へ反映といった callback 処理の記述が面倒だったりします。 一覧画面のスクロール位置を維持しながらページリロードを行うことで、これらの手間を省くことができます。

BACKRAW
  1. tableEditor.bind('table').onSave(function(){
  2.     //keep position
  3.     $.keepPosition.reload();
  4. });

list

Demo

ダウンロード

こちらからどうぞ。

All Posts