新規投稿時、メッセージ画面を最下部にスクロールする挙動が思う様にいきません

Question

###解決したいこと
新規投稿時にメッセージ画面を最下部にスクロールしたいです。

###詳細
rubyでチャット機能をもつwebアプリケーションを作っています。

$(function() {

  function buildHTML(message){

    image = (message.image) ? `<img class= "lower-message__image" src=${message.image} >`:"";

~~中略〜〜
        $('.messages').append(insertHTML);
        $('.messages').animate({ scrollTop: $('.messages')[0].scrollHeight},'fast');
        $("#new_message")[0].reset();
        $(".form__submit").prop("disabled", false);
      }
    })
    .fail(function() {
      alert ('メッセージ送信に失敗しました');
    });
  }
  if (document.location.href.match(//groups/\d+/messages/)) {
    setInterval(reloadMessages, 7000);
  }
});

追記
該当するview

.message{"data-message-id": "#{message.id}"}
  .message-list__top
    .message-list__top__name
      = message.user.name
    .message-list__top__date
      = message.created_at.strftime("%Y年%m月%d日 %H時%M分")
  .message-list__message
    - if message.content.present?
      %p.lower-message__content
      = message.content
    = image_tag message.image.url, class: 'lower-message__image' if message.image.present?

~~略~~
  .messages
    = render @messages
  
~~略~~

###対策
何度も見直してググっても出てきませんでした。

Comments

[winterboum]

viewも載せてください

[harabou]

追記しました！
よろしくお願いします！

[oikashinoa]

> メッセージ画面を最下部にスクロールする挙動が思う様にいきません
どんな動きになってますか？ソースなどを中略してるので、他人には再現できないです。

今の動きを質問文修正して追記したら回答付くと思いますよ。

例:新規投稿時にメッセージ画面を最下部にスクロールしたいですが、今はメッセージ最上部にスクロールしてしまいます。

Answer 1

Javascriptで同期から非同期にコードを打つ際同期ぶんも消していたのが原因でした。
質問の仕方を教えて下さったみなさま。
ありがとうございます！

  $('.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){
        buildHTML(data);
        $('.messages').animate({scrollTop: $('.messages')[0].scrollHeight}, 'fast');  
        $('form')[0].reset();
    })
    .fail(function(){
      alert('投稿に失敗しました');
    })
  })
  

  var reloadMessages = function () {
    last_message_id = $('.message:last').data("message-id");
    $.ajax({
      url: "api/messages",
      type: 'get',
      dataType: 'json',
      data: {id: last_message_id}
    })
    .done(function(messages){
      if ('messages'.length !== 0) {
        var insertHTML = '';
        $.each(messages, function(i, message) {
          insertHTML += buildHTML(message)
        });
        $('.messages').append(insertHTML);
        $('.messages').animate({ scrollTop: $('.messages')[0].scrollHeight},'fast');
        $(".form__submit").prop("disabled", false);
      }
    })
    .fail(function() {
      alert ('メッセージ送信に失敗しました');
    });
  }
  if (document.location.href.match(//groups/\d+/messages/)) {
    setInterval(reloadMessages, 7000);
  }
});