[JavaScript] 相対指定でページをスクロールする（window.scrollBy）

投稿日：2018年9月24日

相対指定でページをスクロールするには、window.scrollBy() を使用します。

構文

（window.scrollBy 構文）: window.scrollBy(＜X方向への相対座標＞, ＜Y方向への相対座標＞)

左方向/上方向は、マイナス値を指定します。

サンプルソース

例）ボタンを押すと、上下左右に100px スクロールする

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>scrollByサンプル</title>
</head>
<body style="width:2000px;">
  <div style="height:1000px;"></div>
  <input type="button" value="y +100" onclick="window.scrollBy(0, 100);">
  <input type="button" value="y -100" onclick="window.scrollBy(0, -100);">
  <input type="button" value="x +100" onclick="window.scrollBy(100, 0);">
  <input type="button" value="x -100" onclick="window.scrollBy(-100, 0);">
  <div style="height:1000px;"></div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>scrollByサンプル</title>

</head>

</body>

</html>

解説

絶対指定でページをスクロールするには、window.scrollToを使用します。
[JavaScript] 絶対指定でページをスクロールする（Window.scrollTo）

執筆者：とら