.scrollIntoView()

https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollIntoView

これは試験的なテクノロジーです。
このテクノロジーの仕様は固定されていないため、様々なブラウザで適切に使用するために「ブラウザ互換性」テーブルを確認してください。また、試験的なテクノロジーの文法と挙動は、仕様の変更があれば各ブラウザの将来のバージョンにおいて変更される事が前提にあることに注意してください。

要素をスクロールして、可視領域の上端、または下端に表示します。

文法

element.scrollIntoView(alignWithTop);

引数説明

alignWithTop

引数	説明
alignWithTop	型：`true` 初期値：`boolean` 任意 trueの場合、スクロールされた要素はスクロール領域の上端に揃えられます。 falseの場合、下端に揃えられます。

型：true 初期値：boolean

任意
trueの場合、スクロールされた要素はスクロール領域の上端に揃えられます。 falseの場合、下端に揃えられます。

注意: デフォルトでは、要素はスクロール領域の上端に揃えられます。

例

<!DOCTYPE html
<html>
<head>
<title>ScrollIntoView() example</title>

<script>
function showTop(elID) {
    var el = document.getElementById(elID);
    el.scrollIntoView(true);
}

function showBottom(elID) {
    var el = document.getElementById(elID);
    el.scrollIntoView(false);
}

//上端に表示ボタンをクリック
var btn_show_top = document.getElementById('btn_show_top');
btn_show_top.onclick = function(){showTop('pToShow')};

//下端に表示ボタンをクリック
var btn_show_btm = document.getElementById('btn_show_btm');
btn_show_btm.onclick = function(){showBottom('pToShow')};
</script>

</head>
<body>
  <div style="height: 5em; width: 30em; overflow: scroll;
              border: 1px solid blue;">
    <div style="height: 100px"></div>
    <p id="pToShow">表示対象</p>
    <div style="height: 100px"></div>
  </div>
  <input type="button" id="btn_show_top" value="上端に表示" />
  <input type="button" id="btn_show_btm" value="下端に表示" />
</body>
</html>

ブラウザ互換性

デスクトップ
機能	Chrome	Firefox (Gecko)	IE	Opera	Safari
基本	1.0	1.0 (1.7 or earlier)	6	10.0 and possibly older versions	4 and possibly older versions

モバイル
機能	Android	Firefox Mobile	IE Mobile	Opera Mobile	Safari Mobile
基本	?	1.0 (1.0)	?	?	?

注意事項

要素はその他の要素のレイアウトに依存して、上端または下端に完全にスクロールされない可能性もあります。

仕様

CSSOM: Scrolling elements into view

このページは、ページトップのURL先のMozilla Developer Network(以下、MDN)のコンテンツを翻訳した内容を基に構成されています。構成について異なる点も含まれますので、下記の項目を確認し、必要に応じて元のコンテンツをご確認ください。もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

特定のブラウザに特化しすぎている情報やあまりにも古い情報、または試験的に導入されているようなAPIや機能については、省略していることがあります。
例やデモについて、実際にページ内で動作させる関係で一部ソースコードを変更している場合や、その例で使用しているコンテンツの単語や文章などを日本人向けに変更しいてる場合があります。
MDNの更新頻度が高いため、元のコンテンツと比べ情報が古くなっている可能性があります。
"訳注:"などの断わりを入れた上で、日本人向けの情報の追記を行っている事があります。