Rails ActionCableを使用してライブチャットを作成するが、.scrollTop jQueryが機能しない

javascripts/channelsには、ビューにデータを追加し、フォームをクリアし、最近送信されたメッセージを表示するためにdivがスクロールダウンされ、2)メッセージコンテンツのヘルパーを表示するために、このmessages.jsファイルがあります。

ファイルは次のようになります。

 App.messages = App.cable.subscriptions.create('MessagesChannel', {
 received: function(data) {
  $("#response").val("");
  $("#conversation-main").scrollTop($("#conversation-main")[0].scrollHeight);
  return $('#messages').append(this.renderMessage(data));
 },

 renderMessage: function(data) {
  return "<div class='message'><div><strong>" + data.user + ":</strong> " + data.body + "</div><div class='date'>" + data.time + "</div></div>"
 }
});
 

私の問題は、メッセージが追加されているが、scrollTopは実行されていないということです。どうしてこれなの?さらに、このファイルをjs.erbに変更してsimple_formatヘルパーを使用すると、追加は完全に防止されます。データはまだ保持され、Webソケットのサブスクリプションは送受信されますが、ビューはdivの下部に追加された新しいメッセージで更新されません。この動作を別の場所で定義する必要がありますか?ビュ

 <div class="column">
 <div class="conversation" id="conversation-main">
  <div id="conversation-body" data-conversation-id="<%= @conversation.id %>">
   <div id="messages">
    <% @messages.each do |message| %>
     <% if message.body %>
      <%= render "message", message: message %>
     <% end %>
    <% end %>
   </div>
  </div>
 </div>
</div>

<div class="column">
 <div class="ui form"> 
  <%= form_for [@conversation, @message], remote: true do |f| %>
   <div class="field">
    <%= f.label :message %>
    <%= f.text_area :body, placeholder: "Your message", id:"response" %>
   </div>
   <%= f.submit "Submit" %>
  <% end %>
 </div>
</div>