Как я могу сделать автоматическую прокрутку вниз - приложение для чата с django

hello Я хочу сделать автоматическую прокрутку вниз, потому что каждый раз, когда я обновляю страницу, я всегда вижу верхнюю часть бесед, я имею в виду start-conversation, вот мой код

<div class="card-body height3 scrollbar" style="margin-bottom: -60px;" id="card-body">
            
                    <ul class="chat-list" id="chat-list-id">
                        <p class="start-conversation">&nbsp;</p>
                        {% for chat in chats %}
                            {% if chat.from_user == user.username %}
                                <li class="out">
                                    <div class="chat-img">
                                        <img alt="avatar" style="height: 48px;width: 48px;" src="{{here.image.url}}">
                                    </div>
                                    <div class="chat-body">
                                        <div class="chat-message">
                                            <h5>Me</h5>
                                            <p>{{chat.messag_body}}</p>
                                        </div>
                                    </div>
                                </li>       
                            {% else %}
                                <li class="in">
                                    <div class="chat-img">
                                        <img alt="avatar" src="{{here.image.url}}">
                                    </div>
                                    <div class="chat-body">
                                        <div class="chat-message">
                                            <h5>{{ chat.from_user }}</h5>
                                            <p>{{ chat.messag_body }}</p>
                                        </div>
                                    </div>
                                </li>
                            {% endif %}
                        {%endfor%}
                    </ul>
                </div>

Вы можете использовать функцию scrollTop в jQuery. Вот так:

$('.chat-body').scrollTop($('.chat-body')[0].scrollHeight);

попробуйте сделать это в нижней части вашей страницы

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
        $('document').ready(function() {
           $('html').animate({scrollTop: document.body.scrollHeight},1);
        });
</script>
Вернуться на верх