使用Javascript滚动到列表底部

Question

I have a for loop that produces a list, I'd like the scrollbar to start at the bottom of the list when the page it open, but I can't seem to be able to make it work after seeing all the available solutions. Here is my code:

HTML:

<div class="js-conversation" id="msg-list">
<div class="modal-body-scroller">
<ul class="media-list-conversation">
{% for msg in messages | sort(attribute='timestamp') %}
<li>
...list html...
</l>
{% endfor %}
</ul>
</div>
</div>

Here is the JAVASCRIPT:

var objDiv = document.getElementById("msg-list");
objDiv.scrollTop = objDiv.scrollHeight;

I have tried moving the id="msg-list" around but it has had not effect anywhere. Any help will be appreciated.

Answer 1

Add jquery and then scroll to the desired element.

<script
    src="https://code.jquery.com/jquery-1.12.4.min.js"
    integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
    crossorigin="anonymous"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('html,body').animate({
                scrollTop: $(".media-list-conversation").offset().top+$(".media-list-conversation").height()
                },
            'slow');
        })
    </script>

Update:

I have created an example: https://jsfiddle.net/j1oqv7xf/ . It has multiple div elements with dummy text and one desired div with a red border. When the page finish loading, the page scrolls to the desired div bottom.