JSの「scrollTop」が機能しないです。

Question

前提・実現したいこと

メッセージをやり取りする場所を作成しております。
最終的には、画面を読み込んだ際に、１番下にスクロールされる様にしたいです。
しかし、
うまくいかなかった為、試しに高さ1000pxの場所に移動させてみようと思い実行したのですが
これでもうまくいっておりません。

ご教授のほどよろしくお願いします。

現状

読み込んでも、スクロールされない。

該当のソースコード

      <div class="contents">
        <div id="contents">
          <% @messages.each do |message| %>
            <div class="content_entire">
              <div class="content">
                <p><%= message.content %></p>
              </div>
            </div>
          <% end %>
        </div>
      </div>

function load (){
  let target = document.getElementById('contents');
  target.scrollTop = 1000;
  console.log(target.scrollTop = 1000)　//コンソール上では表示されます
}window.onload = load;

試したこと

コンソール上では、問題なく[1000]と表示されている為、
数値は取得できていると思います。
記述ミスがありましたら、ご指摘のほどよろしくお願いします。

Answer 1

JSの「scrollTop」が機能しないです。

読み取り専用のプロパティですので、代入による位置指定はできません。

> MDN scrollTop
> The Window.screenTop read-only property returns the vertical distance,
in CSS pixels, from the top border of the user's browser viewport to the top side of the screen.（引用ミスのため削除）

目的の要素まで移動したい場合、以下のメソッドがあります。

• MDN scrollIntoView

細かなオプションには未対応のブラウザもありますが、（主流といえそうなブラウザでは）とりあえずの移動ができるようです。

• Can I use scrollIntoView

１番下にスクロールされる様にしたい

ブラウザ上でページの最下位置にある要素をターゲットに試しても良いと思います。

Comments

[beginner.tanaka]

回答していただき、ありがとうございます。
scrollIntoViewで実装したところ、うまく行きました。

１点質問なのですが、下記のURLを参考に実施したのですが、
「代入による位置指定ができない」という意味がよくわかりません。
let target = document.getElementById('contents');
で、targetを変数にし、この変数を使った位置指定ができないということでしょうか？

https://techacademy.jp/magazine/32976
こちらのサイトでも、同じ様な記述をしております。

もし可能であれば、教えていただきたいです。

[AkitoshiManabe]

> 代入による位置指定ができない
打ち消し線の通り、誤答部分です（リファレンスの 「scrollTop」を参照すべきでしたが、リンク先の通り「screenTop」の解説を引用していました。混乱させてしまい申し訳ありません。

[beginner.tanaka]

かしこまりました！ありがとうございます。

Answer 2

console.log(target.scrollTop = 1000)

代入式をコンソールしても右辺の値が拾えるだけで
target.scrollTopが変更されていることは確認できません
また基本的にscrollTopはbodyに対して処理してください

Comments

[yambejp]

document.querySelector('body').scrollTop = document.documentElement.offsetHeight;
もしくはwindowへのscroll処理
window.scroll({
top: document.documentElement.offsetHeight,
behavior: "smooth"
});