hello I want to auto scrolldown because whenever I refresh the page I see always the top of conversations I mean the start-conversation , this is my code

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

CodePudding user response：

You can use the scrollTop function in jQuery. So like this:

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

CodePudding user response：

try this at the bottom of your page

<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>