HOWTO · JavaScript
JavaScript Div の先頭にスクロール
JavaScript のスクロール動作は、Web ページのコンテンツを簡単に移動するのに役立ちます。 scrollIntoView() と scrollTo() は包括的であり、タスクを実行するために必要なコード行は最小限です。
このページの内容
div 要素を表示領域に表示するには、その要素に対して scrollIntoView() を呼び出します。ページの表示領域を座標で移動するには window.scrollTo() を使います。スクロール可能な div の内容を先頭に戻すには、その要素の scrollTop を 0 に設定します。移動させたいスクロール領域に応じて方法を選びましょう。リンク先が決まっている場合は、通常のページ内アンカーのほうが簡単です。操作やその他のロジックに応じてスクロールさせる場合は、JavaScriptを使います。
JavaScript の scrollIntoView() メソッドで div の先頭へスクロールする
対象の要素を選択し、block: 'start' を指定して scrollIntoView() を呼び出すと、その要素の上端をスクロールコンテナーの先頭に合わせられます。対象を表示するために、ブラウザーがページや入れ子になったスクロールコンテナーをスクロールすることがあります。この例はブラウザーで使うページ全体のソースコードです。ランタイムコーディネーターでは実行されません。
このセクションのコードと表示されるラベルや出力は英語のままです。
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Bring a section into view</title>
<style>
body { min-height: 140vh; }
#target { margin-top: 100vh; }
</style>
<button id="show-target" type="button">Show target</button>
<div id="target">Target section</div>
<script>
document.querySelector('#show-target').addEventListener('click', () => {
document.querySelector('#target').scrollIntoView({
behavior: 'smooth',
block: 'start'
});
});
</script>
</html>
ボタンのイベントハンドラーは対象を選択し、滑らかに移動しながら画面上部付近に合わせるようブラウザーに指示します。対象がスクロール可能な親要素の中にある場合は、そのコンテナーもスクロールすることがあります。すぐに移動させるには behavior: 'smooth' を削除します。
JavaScript の scrollTo() メソッドでページの表示領域をスクロールする
window.scrollTo() はページの表示領域をドキュメント上の座標へ移動します。window.scrollTo(0, 0) を使うと、ページを原点に戻せます。対象要素を表示領域の上端に配置するには、getBoundingClientRect() とページの垂直方向のスクロール量から、対象の現在のドキュメント上の位置を計算します。この方法で移動するのはページであり、スクロール可能な div の内部の内容ではありません。
このセクションのコードと表示されるラベルや出力は英語のままです。
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Align a section with the viewport</title>
<style>
body { min-height: 180vh; }
#target { margin-top: 120vh; }
</style>
<button id="show-target" type="button">Show target</button>
<div id="target">Target section</div>
<script>
document.querySelector('#show-target').addEventListener('click', () => {
const target = document.querySelector('#target');
const documentTop = target.getBoundingClientRect().top + window.scrollY;
window.scrollTo({ top: documentTop, behavior: 'smooth' });
});
</script>
</html>
座標はボタンをクリックした時点で計算されるため、ドキュメント内での対象の現在位置が反映されます。対象を表示するだけでよければ、通常は scrollIntoView() のほうが直接的です。
JavaScript の scrollTop プロパティで div の内容を先頭に戻す
div 自体に縦方向にはみ出す内容がある場合は、scrollTop を使います。値を 0 にすると、その要素内の内容が先頭に戻ります。ページの表示領域は移動しません。以下は、この値の設定を示す実行可能なJavaScriptの例です。小さなオブジェクトでプロパティの変化を示し、続くブラウザー用ページの例では実際の要素を使います。
この例を実行します:
このセクションのコードと表示されるラベルや出力は英語のままです。
const pane = { scrollTop: 48 };
pane.scrollTop = 0;
console.log(pane.scrollTop);
このブラウザー用ページのソースでは、div の高さを固定し、その高さを超える量の内容を入れているため、要素自身の縦スクロールバーで内容を移動できます。
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Reset a scrollable div</title>
<style>
#pane { height: 8rem; overflow-y: auto; border: 1px solid; }
#content { height: 30rem; padding: 1rem; }
</style>
<button id="reset" type="button">Return panel to top</button>
<div id="pane"><div id="content">Scrollable panel content</div></div>
<script>
document.querySelector('#reset').addEventListener('click', () => {
document.querySelector('#pane').scrollTop = 0;
});
</script>
</html>
パネル内の内容を移動するには、そのパネルの scrollTop を使います。パネルにオーバーフローがなければ、スクロールできる内容の範囲はありません。
まとめ
対象の要素を表示領域に表示するには scrollIntoView()、ページの表示領域をドキュメント上の座標へ移動するには window.scrollTo()、スクロール可能な要素の内部の内容を移動するには scrollTop を使います。それぞれ異なるスクロール領域を操作するため、何を先頭に戻したいかに合わせて選びましょう。
