使用Javascript滾動到列表底部

我有一個for循環產生一個列表，我希望滾動條在頁面打開時從列表的底部開始，但我似乎無法在看到所有可用的解決方案後開始工作。這裏是我的代碼：使用Javascript滾動到列表底部

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>

這裏是JavaScript：

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

我試圖移動ID = 「MSG-名單」左右，但它已不能大意任何地方。任何幫助將不勝感激。

來源

2017-11-04 aharding378

添加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底部。

來源

2017-11-04 08:59:28 arsho

感謝您的回答，不幸的是，它不起作用 – aharding378

@ aharding378，我已經通過添加上述腳本的示例更新了我的答案。根據您的要求修改它。 – arsho

使用Javascript滾動到列表底部

回答

相關問題