在日常的聊天工具中，我們開啟一個聊天會話首先定位到的是最近的聊天資訊，即聊天DIV佈局的最底部

實現方法

使用JS原生提供的Element.scrollIntoView()可以定位到指定元素的位置

實現程式碼

<div id='messageList' style='overflow-y:auto;overflow-x: hidden;'>
    <div id='message me'></div>
    <div id='message'></div>
    <div id='message me'
 
></div>
    <div id='message'></div>
    <div id='message me'></div>
</div>
// js指令碼： 
// 利用定時器,圖片載入完成後執行,滾動到聊天DIV底部   
   setTimeout(function () {
       ($('#messageList').children("div:last-child")[0]).scrollIntoView();
           },100);

上述程式碼的意思是定位到聊天佈局的最後一個子元素，即將聊天的滾動條自動下拉到最底部

注意事項

• Element.scrollIntoView()方法是JS提供的元生方法，所以使用jQuery操作DOM獲取到了jQuery物件後要使用方括號運算子將jQuery物件轉為JS的DOM 物件才可以呼叫Element.scrollIntoView()方法

• 由於聊天內容的圖片或語音資訊載入需要一定的時間，假如馬上呼叫Element.scrollIntoView()方法，等圖片載入完成後，會改變聊天DIV滾動條的位置,所以應該使用定時器，當圖片、語音資訊載入完成後再執行Element.scrollIntoView()方法，滾動條就會定位準確