選択した要素をjQueryでページ内の特定の位置へスクロールする方法

Question

例えばサイト内の下半分にdivで区切られたリストがあるとします。

そのリストのどの部分をクリックしても、クリックした部分がリスト内で最上部にくるように自動スクロールさせたいです。

このような場合、どのように実装すれば良いでしょうか？
これだけだと抽象的でしたら、修正します

Comments

[yambejp]

質問が中途半端にアップされてませんか？
スクロールというのがちょっとイメージしにくいのですが
順番を入れ替えるだけではなく「スクロール」しないといけないのでしょうか？

[m.ts10806]

抽象的どころか質問ですらない、作業依頼になっています。
「そのように実装してください」と返されても文句は言えません。

[neoz]

ありがとうございます。はい入れ替えではないです。

イメージですが、リストに100行アイテムがあったとして、表示領域は20行だとします。
このときに、20行目をクリックすると、そのアイテムがリスト内で最上部に来て、リストには20-40行目が表示されている状態にスクロールしたいです。

[neoz]

この表示領域は画面内で固定の位置なので、リスト内のどのアイテムを選択しても、そのアイテムが固定位置へスクロールする、という感じです。

[yambejp]

リストはどういう形式ですか？
テーブル？ul/li？
ページの最下部の方にあるデータは、
スクロールできないと思いますがどういう想定でしょうか？

[neoz]

リストはdivで区切ったものになります。個別に番号のパラメータは持っています。
おっしゃる通り、最下部はスクロールせず、を想定しております。

[m.ts10806]

質問ではなく作業依頼です。
「質問するときのヒント」読んでください。

Answer 1

$(function(){
  $('div').on('click',function(){
     $('html,body').animate({scrollTop: $(this).offset().top}, 500, 'swing');
  });
});

Comments

[neoz]

ありがとうございます。手元の環境に統合して実行してみて、またご報告/ベストアンサー等させて頂きます！

[neoz]

jQueryの知見がなかったので、非常に参考になったのですが、まだ必要なものが実装できず…

イメージとしては、例えばOutlookのメールボックスがあり、メールを行表示で一覧にしているとき、どこにいても、どのメールをクリックしても、そのメールをクリックすると一覧の一番上にそのメールが来るようにスクロールする、という感じです。

現状だとクリックした場所によって行き過ぎたり、逆に戻りすぎたりしてしまいます。
jQueryへの理解が不十分なので、こうすれば良いですか？という質問にならず恐縮ですが…この場合良い解決策はありますでしょうか？

[yambejp]

行き過ぎたり戻りすぎたりするサンプルをcodepenなど動作の確認できるサイトにアップして下さい
単純にcssの指定がおかしいだけのような気がしますが・・・

[neoz]

すみません、（少なくともすぐには）サンプル化ができそうにない長大なものの一部で・・・しかしコードがないとわからないですよね。

頂いたコードの意図としては、トップからのスクロール量をはかり、500px分何かしている、ということになるのでしょうか。

CSSも設定が必要になりますか？現状スクロールに関連するような内容は入れていないです。