[jQuery]常に一番下にスクロールしたい。直接ページにアクセスするのとページ更新で挙動が異なる。

Question

現状

現在RailsでLineのチャットボットのようなものを作成中です。
Lineのように下から次々メッセージが出てくるようなUIにしたいので常にチャット窓を一番下にスクロールしたいです。

それで他サイト等を参考にしながら、以下のようにjsを書いたのですが、"ページ更新”の場合はうまく
一番下までスクロールしてくれるのですが、普通にそのページにアクセスしたときにうまく挙動してくれません。（チャット窓の一番上が表示されたままになります）
・.card-bodyの部分が以下の画像のチャットダイアログ部分になります。
・

$(function() {
  $('.card-body').animate({scrollTop: $('.card-body')[0].scrollHeight}, 'normal');
});

質問

・どのようにコードを改善すれば普通にアクセスした時もうまく一番下までスクロールしてくれるようになるでしょうか？
・上のjsのコードにある$('.card-body')[0]の部分の[0]とは何を指すのでしょうか？
（この[0]を無くすとページを更新した場合でも挙動しなくなります。)

蛇足

発言があるたびに一番下までスクロールするという部分は翻訳部分を押した時のcreateメソッドを通して以下のように実装できている状況です。

<% if @status == 'success' %>
    $(".card-body").append("<%= j(render("translate-box-ajax", translate: @translate)) %>");
    $('.card-body').animate({scrollTop: $('.card-body')[0].scrollHeight}, 'fast');
<%  elsif @status == 'fail' %>
    alert('不正な入力かも');
<% end %>s

Answer 1

もしTurbolinksを利用しているなら下記のように記載する必要があります。

$(document).on('turbolinks:load', function() {
　// コード
});

Comments

[退会済みユーザー]

回答ありがとうございます, こちらの方法でうまくいきました！
turbolinksが発行しているイベントを元にスクロールを発火させる必要があったのですね〜

[no1knows]

それは良かったです！

Answer 2

下記にしてみたらどうだろう。

$(window).on('load', function() {
  $('.card-body').animate({scrollTop: $('.card-body')[0].scrollHeight}, 'normal');
});

$(function() {}); だとDOMが読み込まれた直後、
$(window).on('load', function() {}); だとブラウザに表示された直後
ということなので。

jQueryで読み込んでから処理を開始 - Qiita

・上のjsのコードにある$('.card-body')[0]の部分の[0]とは何を指すのでしょうか？

.card-body は複数存在する可能性がありますので、$('.card-body')はオブジェクトの集合を返します。[0]はその最初のものという意味になります。一つしかなくても集合の中のオブジェクトという意味で必要になります。
jQueryの場合は通常はeq()を使います。

【jQuery入門】eq()の使い方とインデックス番号の活用法！ | 侍エンジニア塾ブログ（Samurai Blog） - プログラミング入門者向けサイト

[0]はjQueryではなくJavaScriptの配列用のものです。
eq(0)で取得するとjQueryオプジェクト、[0]だとDOM要素を返すらしいです。
（この辺はあまり自信がないので表現が正確でないかも）

Comments

[退会済みユーザー]

回答ありがとうございます。こちらの方法でもうまくいきませんでした...
どうやらrailsに搭載されているturbolinksというものが悪さをしているようです。
もう少し調べてみます！

[hatena19]

他の方から回答ついてますね。どうやらそのようです。

[退会済みユーザー]

二つ目の質問に答えていただきありがとうございます！
セレクタを指定したときにそのオブジェクトの集合を返すとは知りませんでした...

.scrollHeightのような一つに定まる値を取得するときには、[0]のようにオブジェクトをしっかり一意かつ一つに指定してあげる必要があるということなのでしょうかねー

[hatena19]

.scrollHeight はjsのDomオプジェクトのプロパティ、
jQueryオプジェクトで高さを取得する場合は height() でないダメということかも。
下記ならOKでは？
$('.card-body').Height()