자바 스크립트를 사용하여 목록의 맨 아래로 스크롤

Question

나는 목록을 생성하는 for 루프를 가지고 있는데, 페이지가 열릴 때 스크롤바가 목록 맨 아래에서 시작되기를 바랄 수 있지만 보이지 않는다. 사용 가능한 모든 솔루션을 본 후에 작동하게하십시오.

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> 

여기

입니다 자바 스크립트 : 다음은 내 코드입니다 나는 주위 ID = "MSG-목록을"이동 시도하지만 효과가 없습니다했다

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

어딘가에. 도움이 될 것입니다.

Answer 1

jquery를 추가 한 다음 원하는 요소로 스크롤하십시오.

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

업데이트 :

나는 예를 만들었습니다 https://jsfiddle.net/j1oqv7xf/. 더미 텍스트가있는 여러 div 요소와 빨간색 테두리가있는 원하는 div가 하나 있습니다. 페이지로드가 완료되면 페이지가 원하는 div 하단으로 스크롤됩니다.