Прокрутите чат к низу - Laravel с AJAX

Question

Надеюсь, у вас все в порядке. Я пытаюсь создать простой GroupChat в Laravel, используя AJAX. Большинство из них работает нормально, только две мои проблемы: я хочу, чтобы чат прокручивался вниз, когда пользователь открывает страницу и отправляет новые сообщения. Кроме того, я заметил, что когда я отправляю сообщение, я добавляю новое сообщение, но оно не будет отображаться до тех пор, пока не наступит setTimeout FetchMessages. Я хочу, чтобы сообщение было добавлено немедленно.

Вот мой код:

<script type="text/javascript">
        $(document).ready(function(){
            setTimeout(fetchMessages, 0);
        });
        function fetchMessages() {
            $.ajax({
                type:'post',
                url:'/chat/get',
                data:{
                    '_token':$('input[name=_token]').val(),
                },
                success: function (data) {
                    $('#message').replaceWith(' <ul class="media-list" id="message" style="list-style: none !important;"></ul>');
                    for (var i=0; i < data.length; i++){
                        $('#message').append('<li> <div class="row msg_container"> <div class="col-md-10 col-xs-10"> <div class="messages msg_sent"> <div> <small class="text-muted">'
                                                + data[i].user.name +'</small> <small class="text-muted float-right">' 
                                                + data[i].created_at + '</small> </div> <p class="msg-text">' 
                                                + data[i].message + '</p> </div> </div> </div> </li> ')
                    }
                },
            });
            setTimeout(fetchMessages, 1000 );

        }

        $(document).on('click','#send', function (){
            var scrollPosition = $("#msgBase").scrollTop();
            var scrollHeight = $("#msgBase")[0].scrollHeight;
            $.ajax({
                type:'post',
                url:'/chat/send',
                data:{
                    '_token':$('input[name=_token]').val(),
                    'message':$('input[name=message]').val(),
                },
                success: function (data) {
                  $('#message').append('<li> <div class="row msg_container"> <div class="col-md-10 col-xs-10"> <div class="messages msg_sent"> <div> <small class="text-muted">'+ data[i].user.name +'</small> <small class="text-muted float-right">' + data[i].created_at + '</small> </div> <p class="msg-text">' + data[i].message + '</p> </div> </div> </div> </li>');
                  if (scrollPosition+$("#msgBase").height() === scrollHeight) { $("#msgBase").scrollTop(scrollHeight); }
                }

            })

            $('input[name=message]').val('');
        });

    </script>