【コピペ可能】特定の要素までスクロールさせる方法

Image by Squirrel_photos from Pixabay プログラミング
Image by Squirrel_photos from Pixabay

こんにちは、コンスキです。

ボタンをクリックしたときなどにページ内の特定の場所まで自動でスクロールさせたいときってありますよね。

今回は、JavaScriptを使ってシンプルに自動スクロールさせる方法を紹介します。

どんなふうに使えるの?

自動スクロールって言っても、想像するものは人それぞれだと思います。

作った後に思ってたのと違かったっていうことがあると悲しいですので、完成形の例を見てみましょう。

例えば上のような「お問い合わせ」というボタンを作っておいて、それをクリックするとお問い合わせフォームの部分へスクロールしてくれるような動作ができます。

スクリプト

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="scroll.css">
  <title>自動スクロール</title>
</head>
<body>
  <button id="scroll_button">自動スクロール</button>
  <div id="target">ターゲット</div>
  <script src="scroll.js"></script>
</body>
</html>
#scroll_button {
  border: 1px solid black;
  border-radius: 10px;
}
#target {
  width: 100%;
  height: 800px;
  margin-top: 2000px;
  background-color: #C7D93D;
}
// 要素を取得
var scrollButton = document.getElementById('scroll_button');
var target = document.getElementById('target');

// ターゲット要素の座標を取得
var targetRect = target.getBoundingClientRect();
var targetPosition = targetRect.top;

// ボタンを押したらスクロールするように設定
scrollButton.addEventListener('click', function() {
	window.scrollTo({
	  top: targetPosition,
	  behavior: 'smooth'
  });
});

完成形

上のスクリプトを書いていくと次のようなものを作ることができます。

scrollToメソッドの説明

スクロールを可能にさせたのは「scrollTo」というメソッドです。

このメソッドには2つの使い方があります。

  1. スクロール先の座標を直接引数に渡す使い方
  2. スクロール先の座標と動作を滑らかにするかどうかを引数にオブジェクトとして渡す使い方

※ちなみにここでいうオブジェクトとは「{ キー:値 }」の形式になっている部分のことを指しています。

1の使い方だとボタンを押したらスクロールするというよりも、瞬間移動してしまいます。

そこで今回は2つ目の「引数にオブジェクトを渡す使い方」をしました。

window.scrollTo({
	top: スクロールして表示させたい要素の上の部分のy座標,
	behavior: 'smooth'または'auto'
});

大事なのはのbehaviorというキーの2つ目のプロパティです。

このプロパティの値を「’smooth’」にすると瞬間移動ではなく、ゆっくり滑らかにスクロールします。

autoに設定すると、スクロールというよりは瞬間移動します。

コメント

タイトルとURLをコピーしました