[JavaScript] ページの最下部へ移動するサンプル

投稿日：2018年4月7日更新日：2018年5月2日

ボタンを押すと、ページの最下部へ移動するサンプルです。

サンプルソース

例）ボタンを押すとページの最下部へ移動する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ページの最下部へ移動するサンプル</title>
<script>
function test(){
  var a = document.documentElement;
  var y = a.scrollHeight - a.clientHeight;
  window.scroll(0, y);
}
</script>
</head>
<body>
  <input type="button" onclick="test();" value="最下部へ移動する">
  <div style="height:2000px;">ページ</div>
  <p>ここが最下部です</p>
</body>
</html>

<!DOCTYPE html>

<head>

<title>ページの最下部へ移動するサンプル</title>

function test(){

var a = document.documentElement;

var y = a.scrollHeight - a.clientHeight;

window.scroll(0, y);

}

</script>

</head>

<body>

<p>ここが最下部です</p>

</body>

</html>

実行サンプル

ボタンを押すと、ページ最下部へ移動します。

解説

使用している値は以下の通りです。
scrollHeight：ページの高さ
clientHeight：ブラウザの高さ

執筆者：とら