ページに移動したときに一番下の状態にする

チャットアプリを作成しており、チャットルームに入ったときに一番下に移動してすぐに最新メッセージが見えるようにしたいです。
application.jsで一番下の要素を取得し、スクロールすると書いたのですがうまく動作しません。値自体は取得できているみたいです。

application.js

javascript
1$(function(){
2  // ボトムに移動する
3  var target = $("#bottom");
4  console.log(target.offset().top);
5  $(window).scrollTop(target.offset().top);
6...
7});

bottomに関しては、メッセージを送信するフォームの一番下に書いてあります。フォーム自体は、一番下に固定されるようになっているため、bottomは一番下の要素になります。

_message_form.html.erb

html
1<nav class="navbar navbar-default navbar-fixed-bottom message_form">
2	<div class="container">
3		<div class="row">
4      <div class="col-xs-10">
5        <form style="display: flex;">
6          <input type="hidden" id="user_name" value="<%=current_user.id%>">
7          <textarea id="speaker" class="form-control speaker_txt" data-behavior="room_speaker"><%= cookies[:speaker] %></textarea>
8          <button class="btn btn-default chat_sendbtn" type="submit">送信</button>
9          <span class="picture">
10            <input id="picture" name="page[fine_name]" size="4" type="file" accept='image/jpeg,image/gif,image/png' >
11          </span>
12        </form>
13      </div>
14      <div class="col-xs-2">
15        <div style="margin-top:1.5rem;">
16          <a class="latest" href="#bottom">最新</a>
17        </div>
18      </div>
19    </div>
20  </div>
21</nav>
22
23<div id="bottom">
24</div>

どうしてうまく動作しないのでしょうか？そもそもスクロールのやり方が悪いのでしょうか？ご教授お願いします。

m.ts10806

2021/12/01 05:30

投稿日降順で表示すれば移動しなくても済むのでは…。

Lhankor_Mhy

2021/12/01 06:29

アンカーが置いてあるのだから、location で #bottom に飛ぶとか、いっそのことリンクにフラグメントを追加してしまった方が早そう。

atmosphere

2021/12/02 02:42

LINEのように、一番下に最新の投稿が出るようにしたいので、このようなやり方をしています。 locationで飛ぶやり方は知りませんでした。それでやってみたところ、別のページから移動してきた時は、一番下に移動するようになりました。しかし、再読込した時は最下部に移動しないのですが、理由がわかりません。このままでもいいと思いますが、原因がわかりますでしょうか？

m.ts10806

2021/12/02 04:00

loadイベントで最下部までスクロールするように組めば良いと思います。

atmosphere

2021/12/02 12:35

loadにしたのですが、再読込したときに移動しませんでした。