overflow:scrollのコンテンツのY座標スクロール移動

html
1<div id="container" style="overflow-y:scroll； height:300px">
2<div id="content" style="height:600px">
3画像とかテキストとか
4</div>
5</div>
6
7<p class="btn>ボタン</p>

このようなソースがあります
wrapperの#containerよりも中身の#contentの方が高さがあり、
300pxほどはみ出してスクロールバーが表示されてる状態なのですが
ボタンのクリックで#contentを100pxY軸マイナス方向にスクロールさせたいと思っています

が、クリックでイベントの発生まではできるのですがその後がうまくいきません

javascript
1tgt_ypos = 300
2$('#content').animate({
3  top:'-='+tgt_ypos
4  }, 1000, 'swing');

このjsで、中身は確かに300px移動するのですが、スクロールバーがデフォルトの位置から動かないという状況です

何がおかしいのでしょうか

ちゃんと#contentが移動して、スクロールバーもそれに応じた位置に動いてくれるのが期待する動作なのですが…

ご意見よろしくおねがいします！

行動規範の内容に同意します

回答1件

animateはスクロールを操作しないから。（提示のものは#contentにpositionが指定されている状態でなら要素が動くでしょう。それはスクロールとは関係なく要素をずらしているだけです）

投稿2019/01/26 12:51

kei344

総合スコア69407

taaa

2019/01/27 03:57

ありがとうございます！コンテンツではなく、wrapper要素への $('#container').scrollTop(300)　で目的の動作を実現できることがわかりましたしかし、これだと一瞬で移動してしまうのですが、なめらかにスクロールして移動させることは難しいでしょうか？

kei344

2019/01/27 04:38

あ、すみません animate でスクロールする方法がありました。【jQuery の animate 関数を使ってページトップにスムーズスクロールするボタンを作ろう | phiary】 http://phiary.me/jquery-animate-page-top-smooth-scroll-button/ 【jQueryでスムーススクロールを実装する方法 | TechAcademyマガジン】 https://techacademy.jp/magazine/9532

taaa

2019/01/27 07:34

お休みの日にありがとうございます！　拝見します！

行動規範の内容に同意します