jqueryで自動スクロールができません

Question

前提・実現したいこと

Rails初心者です。
Rails内のjQueryで自動スクロールを実装しようとしたのですが、うまく反映されず質問させていただきました。

ご回答いただけると非常に助かります。

発生している問題・エラーメッセージ

Rails内のjQueryで自動スクロールができない

該当のソースコード(message.js)

$(function(){
  function buildMessage(message){
    var html =  `<div class="chat" data-chat-id="${message.id}">
                  <div class="chat-box">
                  <div class="chat-face">
                  <img style="width:100px; height:100px;" src="http://localhost:3000/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBDdz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--9a1a6ec25f629d85cdc814e24a22f2a07b002ab2/${message.avatar}"></div>
                  <div class="chat-hukidashi">
                        <strong>${message.content}</strong>
                        <br>${message.date}
                  </div>
                  </div>
                  </div>`
    return html;
  }
  $("#new_message").on("submit", function(e){
    e.preventDefault();
    var formData = new FormData(this);
    var url = $(this).attr('action')
    $.ajax({
      url: url,
      type: "POST",
      data: formData,
      dataType: "json",
      processData: false,
      contentType: false
    })
    .done(function(data){
      var html = buildMessage(data);
      $('.chats').append(html)
      $('.chats').animate({scrollTop: $('.chats')[0].scrollHeight}, 'fast');
      $("form")[0].reset();
    })
    .fail(function(){
    alert('error');
    })
  })
});

該当のソースコード(messages_controller)

class MessagesController < ApplicationController
    before_action :authenticate_user!, only: [:create]
  
    def create
      if Entry.where(user_id: current_user.id, room_id: params[:message][:room_id]).present?
        @message = Message.create(params.require(:message).permit(:user_id, :content, :room_id).merge(:user_id => current_user.id))
        respond_to do |format|
          format.html { redirect_to "/rooms/#{@message.room_id}"}
          format.json
        end
      else
        @messages = messages.includes(:user)
        flash.now[:alert] = "メッセージを入力してください。"
        render template: "room/new"
      end
    end
end

該当のソースコード(vies/messages/create.json.jbuilder)

json.content @message.content
json.avatar @message.user.avatar
json.user_name @message.user.name
json.date @message.created_at.strftime("%Y/%m/%d %H:%M")
json.id @message.id

補足情報（FW/ツールのバージョンなど）

Ajaxの非同期通信には成功しています。

Ruby version 2.5.1
Rails version 5.2.3

Comments

[terotero]

>うまく反映されず
これは自動スクロールが行われなかったということですか？

[rui-watanabe]

そうです。
自動スクロールができないということです。

Answer 1

自動スクロールさせる要素はスクロールできる要素である必要がある為、
以下の通り修正してみてください。

###修正前

$('.chats').animate({scrollTop: $('.chats')[0].scrollHeight}, 'fast');

###修正後

$('html,body').animate({scrollTop: $('.chats')[0].scrollHeight}, 'fast');

Comments

[rui-watanabe]

ご回答ありがとうございます！
ご回答通り記載したら、解決することができました！！
非常に助かりました、ありがとうございます。
スクロールできる要素全体にまずは指定するということですね。
勉強になりました。