animateメソッド
メッセージを送信したらメッセージの最下部まで自動でスクロールするようにするために使うメソッドです。
animateメソッドは、メソッドを利用したオブジェクト(レシーバ)が持つプロパティなどを、指定した値まで徐々に変化させることができるメソッドです。
【例】縦横50pxのdiv要素を用意し、これに対して以下のようにanimateメソッドを使用しました。
$('.box').animate({'height' : '200px'});
heightプロパティを指定して、200pxまで増えるように指定しています。
これを応用して、メッセージが投稿されたら必ず一番下までスクロールするようにします。
【例】
message.js
〜省略〜
$('.messages').append(html);
$('form')[0].reset();
〜省略〜
【例】
$('.messages').animate({ scrollTop: $('.messages')[0].scrollHeight});
scrollTopはjQueryのメソッドで、指定した値の分だけanimateメソッドを利用した要素をスクロールします。
$('.messages')[0].scrollHeightの部分は、メッセージが入ったdiv要素のスクロールできる高さの数字を取得しています。
このように書くことによってスクロールすべき分メッセージが入ったdiv要素をスクロールできます。
また、投稿した際に、テキストボックスの中の文字列や、選択した画像は空にする必要があります。jQueryの.reset()を用いて、画像とテキストを空にするような実装を行います。