チャットアプリで、最新のメッセージを常に表示させたい

先日、mBaaSとPusherを使ったチャットアプリで、チャットの内容がすぐに反映されないと言うタイトルで下記質問をさせていただいた者です。
その後、開発を進めていったのですが、最新のメッセージを常に表示するように機能を追加したのですが、上手く動作しませんでした。

ソースコードとしては、下記となります。
chat.html

html
1<ons-page id="chat">
2    <ons-toolbar>
3      <div class="left"><ons-back-button>Back</ons-back-button></div>
4      <div class="center"></div>
5    </ons-toolbar>
6    <input type="hidden" id="channelId" />
7    <div id="your_container">
8      <!-- チャットの外側部分① -->
9      <div id="bms_messages_container">
10  
11          <!-- タイムライン部分② -->
12          <div id="bms_messages">
13            <div id="chats"></div>
14          </div>
15  
16          <!-- テキストボックス、送信ボタン④ -->
17          <div class="send-area">
18            <ons-input id="message" placeholder="メッセージ"></ons-input>
19            <ons-button onclick="send()" modifier="quiet">送信</ons-button>
20            <ons-button onclick="positiondata()" modifier="quiet">位置確認</ons-button>
21          </div>
22      </div>
23    </div>
24</ons-page>

style.css

CSS
1/**/
2
3.send-area {
4    padding: 0 5px;
5    box-sizing: border-box;
6    line-height: 49px;
7    position: fixed;
8    bottom: 0px;
9    width: 100%;
10    border-top: solid 1px #ccc;
11  }
12   
13  .send-area ons-input {
14      display: inline-block;
15      position: relative;
16      width: calc(100% - 60px);
17  }
18   
19  .send-area input {
20      vertical-align: middle;
21    position: relative;
22    width: 98%;
23  }
24
25  #your_container{
26    /* 高さや幅など、好きな様に設定
27    bms_messages_containerの方で、縦横いっぱいに広がってくれるので、
28    ここで充てた高さと横幅がそのままスタイルになる仕組み */
29
30    height:80%;/*ここはご自由に*/
31    width: 100%;/*ここはご自由に*/
32}
33/* チャットの外側部分① */
34#bms_messages_container{
35    height: 100%;/*your_containerに対して100%になる */
36    width: 100%;/*your_containerに対して100%になる */
37    background-color: #eee;
38}
39
40/* タイムライン部分② */
41#bms_messages {
42    overflow: auto;/* スクロールを効かせつつ、メッセージがタイムラインの外に出ないようにする */
43    height:100%;/*テキストエリアが下に張り付く様にする*/
44    border-right: 1px solid #ddd;
45    border-left: 1px solid #ddd;
46    background-color: #eee;
47}
48    /* メッセージ全般のスタイル */
49    .bms_message {
50        margin: 0px;
51        padding: 0 14px;/*吹き出しがタイムラインの側面にひっつかない様に隙間を開ける*/
52        font-size: 16px;
53        word-wrap: break-word;/* 吹き出し内で自動で改行 */
54        white-space: normal;/*指定widthに合わせて、文字を自動的に改行*/
55    }
56        .bms_message_box{
57            margin-top: 20px;/*上下の吹き出しがひっつかない様に隙間を入れる*/
58            max-width: 100%;/*文字が長くなった時に吹き出しがタイムラインからはみ出さない様にする*/
59            font-size: 16px;
60        }
61            .bms_message_content{
62                padding: 10px;/*文字や画像（コンテンツ）の外側に隙間を入れる*/
63            }
64        /* メッセージ１（左側） */
65        .bms_left {
66            float: left;/*吹き出しをbms_messagesに対して左寄せ*/
67            line-height: 1.3em;
68        }
69            .bms_left .bms_message_box {
70                color: #fff;/*テキストを白にする*/
71                background: rgb(0, 145, 197);
72                border: 2px solid rgb(0, 145, 197);
73                /* border-radius: 30px 30px 30px 0px; 左下だけ尖らせて吹き出し感を出す*/
74                margin-right: 50px;/*左側の発言だとわかる様に、吹き出し右側に隙間を入れる*/
75            }
76        /* メッセージ２（右側） */
77        .bms_right {
78            float: right;/*吹き出しをbms_messagesに対して右寄せ*/
79            line-height: 1.3em;
80        }
81            .bms_right .bms_message_box {
82                color: #fff;/*テキストを白にする*/
83                background: rgb(0, 154, 87);
84                border: 2px solid rgb(0, 154, 87);
85                /*border-radius: 30px 30px 0px 30px;右下だけ尖らせて吹き出し感を出す*/
86                margin-left: 50px;/*右側の発言だとわかる様に、吹き出し左側に隙間を入れる*/
87            }
88            .bms_right .bms_message_time {
89                margin-left: 50px;/*右側の発言だとわかる様に、吹き出し左側に隙間を入れる*/
90            }
91        /* 回り込みを解除 */
92        .bms_clear {
93            clear: both; /* 左メッセージと右メッセージの回り込み(float)の効果の干渉を防ぐために必要（これが無いと、自分より下のメッセージにfloatが影響する） */
94        }
95
96/* テキストエリア、送信ボタン④ */
97#bms_send {
98    background-color:#eee;/*タイムラインの色と同じにする*/
99    border-right: 1px solid #ddd;
100    border-left: 1px solid #ddd;
101    border-bottom: 1px solid #ddd;
102    height: 48px;
103    padding: 4px;
104}
105    #bms_send_message{
106        width: calc(100% - 75px);/*常に送信ボタンの横幅を引いたサイズに動的に計算*/
107        line-height: 16px;
108        height: 48px;
109        padding: 14px 6px 0px 6px;/*文字がテキストエリアの中心になる様に隙間調整*/
110        border: 1px solid #ccc;
111        border-radius: 4px;/*角丸*/
112        text-align: left;/*文字を左寄せ*/
113        box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.2) inset;/*内側に影を入れてテキストエリアらしくした*/
114        box-sizing: border-box;/*paddingとborderの要素の高さと幅の影響をなくす（要素に高さと幅を含める）*/
115
116    }
117    #bms_send_btn {
118        width: 72px;
119        height: 48px;
120        font-size: 16px;
121        line-height: 3em;
122        float: right;/*bms_sendに対して右寄せ*/
123        color: #fff;
124        font-weight: bold;
125        background: #bcbcbc;
126        text-align: center;/*文字をボタン中央に表示*/
127        border: 1px solid #bbb;
128        border-radius: 4px;/*角丸*/
129        box-sizing: border-box;/*paddingとborderの要素の高さと幅の影響をなくす（要素に高さと幅を含める）*/
130    }
131    #bms_send_btn:hover {
132        background: #13178E; /*マウスポインタを当てた時にアクティブな色になる*/
133        cursor: pointer;/*マウスポインタを当てた時に、カーソルが指の形になる*/
134    }
135

app.js


function task1(data) {
  return new Promise(function (resolve, reject) {
    connectPusher(data.userName, data.chatId);
    loadChat(data.userName, data.chatId);
    console.log('task1 完了');
    resolve('task完了');
  });

};

// チャット画面を表示したときの処理
$(document).on('show', (event) => {
  if (event.target.id === 'chat') {
    const data = event.target.data;
    $('#channelId').val(data.chatId);

    Promise.resolve()
      .then(task1.bind(this, data))
      .then(function() {
        return new Promise(function (resolve, reject) {
          // スクロール位置の取得
          var scrollPos = $('#bms_messages').offset().top;
          console.log(scrollPos);
          $('#bms_messages').animate({scrollTop: scrollPos});
          resolve('成功');
        });
      });
  }
});


const positiondata = () => {
  // スクロール位置の取得
  var scrollPos = $('#bms_messages').scrollTop();
  console.log(scrollPos);
};

現在のつまずいている場所としては、app.jsの中の49行目
var scrollPos = $('#bms_messages').offset().top;
で、最新のメッセージがある位置（最下部）の値を取りたいのですが、ネットで調べてもよくわかりませんでした。
ちなみに、このscrollPosに、100と言ったリテラル値を入れると正常に動作します。
試しに、
var scrollPos = $('#bms_messages').offset().bottom;
var scrollPos = $('#bms_messages').weight();
と試して見たのですが、値がundefinedになってしまい、ほしい値が入ってきません。

もう一点確認したい点としては、同じくapp.jsの中の51行目
$('#bms_messages').animate({scrollTop: scrollPos});
で今は、animateを使用しているのですが、本当はスクロールする画面を見せず、始めから一番最新のメッセージ
が見れるようにしたいのですが、その方法が分かりませんでした。
こちらに関しては、ネットを検索してみても、解決方法が見つかりませんでした。

ご教授いただけると助かります。よろしくお願いします。