ページ最下部へ移動するにはどうすればいいですか？

Webページを閲覧中、長いページの場合、ページ最下部まで移動する必要がある場合があります。スクロール操作は、マウスホイールや画面上のスクロールバーを使う方法が一般的ですが、キーボード操作でもページ移動が可能です。

主なキーボードショートカット

ブラウザーの画面スクロールに使う主なキー操作は以下の通りです。

操作	説明
Shift + スペース	1画面分上へ移動 ※「PageUp」キーでも同じ。
スペース	1画面分下へ移動 ※「PageDown」キーでも同じ。
Home	ページの先頭へ移動
End	ページの末尾へ移動

上記以外にも、矢印キーの上下や、マウスホイールの上下スクロールなどでページを移動できます。

ページ最下部への移動方法

ページ最下部へ移動するには、「End」キーを押す方法が最も簡単です。 **HTMLでページ下部に移動ボタンを設置する** ページ下部に移動するボタンをHTMLで設置することもできます。以下は、ボタンをクリックするとページ下部にスムーズにスクロールするコード例です。


<button onclick="scrollToBottom()">ページ下部へ移動</button>

<script>
function scrollToBottom() {
  window.scrollTo({
    top: document.documentElement.scrollHeight,
    behavior: 'smooth'
  });
}
</script>

このコードでは、ボタンをクリックすると`scrollToBottom()`関数が実行され、`window.scrollTo()`メソッドを使ってページ下部へスクロールします。`behavior: 'smooth'`を設定することで、スムーズなスクロールを実現しています。 **参考資料** * [MDN Web Docs: window.scrollTo()](https://developer.mozilla.org/ja/docs/Web/API/Window/scrollTo) ## よくある質問 **Q1: 「End」キーを押してもページ最下部まで移動しない場合は？** A1: ページ内のiframeやフレーム内にフォーカスが当たっている可能性があります。その場合は、メインのページにフォーカスを戻してから「End」キーを押してみてください。 **Q2: スムーズにページ最下部までスクロールしたい場合は？** A2: 上記のHTMLコード例のように、JavaScriptの`window.scrollTo()`メソッドを使用し、`behavior`オプションに`'smooth'`を設定することでスムーズなスクロールを実現できます。 **Q3: ページ下部に固定フッターがある場合、フッターに隠れてコンテンツが見えなくなる場合は？** A3: スクロール位置を調整する必要があります。`window.scrollTo()`メソッドで指定する`top`の値を、フッターの高さ分だけ減らすことで、コンテンツが隠れないように調整できます。

その他の参考記事:jquery 動かない