スクロールアニメーションも自在！JavaScriptで要素にスクロールする方法
JavaScript で要素にスクロールする方法
Web ページ上で、特定の要素までスムーズにスクロールすることは、ユーザー体験を向上させるために重要です。JavaScript を使用することで、様々な方法で要素にスクロールすることができます。ここでは、代表的な方法と、それぞれの特徴について詳しく解説します。
方法
-
scrollTo() メソッドを使う
最も基本的な方法が、
scrollTo()メソッドを使うことです。このメソッドは、要素の座標を指定することで、その要素まで一気にスクロールします。// 要素の ID を使ってスクロール element.scrollTo({ top: 0, left: 0, behavior: 'smooth' }); // 要素のオブジェクトを使ってスクロール element.scrollTo({ top: element.offsetTop, left: element.offsetLeft, behavior: 'smooth' });特徴
- シンプルで分かりやすい
- アニメーションなしで一気にスクロールする
- 素早くスクロールしたい場合に適している
-
scrollIntoView()メソッドは、要素をウィンドウ内に表示するために必要なだけスクロールします。要素の一部がウィンドウ内に表示されている場合でも、要素全体が見えるようにスクロールされます。// 要素の ID を使ってスクロール element.scrollIntoView({ behavior: 'smooth' }); // 要素のオブジェクトを使ってスクロール element.scrollIntoView({ inline: true, behavior: 'smooth' });- 要素を確実にウィンドウ内に表示できる
- スムーズなアニメーションでスクロールする
- ユーザーにとって自然な動きになる
-
window.scroll()プロパティは、ウィンドウ全体のスクロール位置を設定します。要素までのオフセット量を計算して、このプロパティに設定することで、要素にスクロールすることができます。// 要素までのオフセット量を計算 const offsetTop = element.getBoundingClientRect().top; const scrollTop = window.scrollY; const distance = offsetTop - scrollTop; // ウィンドウをスクロール window.scroll({ top: scrollTop + distance, behavior: 'smooth' });- 柔軟性が高い
- 要素以外にも、ウィンドウ全体の位置を制御できる
- 他の方法と組み合わせて複雑な動きを作れる
-
アニメーションオプション
-
イベントとの組み合わせ
-
ライブラリの利用
JavaScript で要素にスクロールするには、様々な方法があります。それぞれの方法の特徴を理解して、目的に合った方法を選択しましょう。
scrollTo() メソッドを使う
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>scroll to example</title>
</head>
<body>
<h1>見出し1</h1>
<p>本文1</p>
<h2 id="target">見出し2</h2>
<p>本文2</p>
<button onclick="scrollToTarget()">要素にスクロール</button>
<script>
function scrollToTarget() {
const targetElement = document.getElementById('target');
targetElement.scrollTo({
top: 0,
left: 0,
behavior: 'smooth'
});
}
</script>
</body>
</html>
このコードは、以下の動作を行います。
<h1>見出し1</h1>と<h2>見出し2</h2>という見出しと、それぞれに対応する本文を表示します。id="target"という ID を持つ<h2>見出し2</h2>要素を用意します。button要素をクリックすると、scrollToTarget()関数が呼び出されます。scrollToTarget()関数は、getElementById()メソッドを使ってid="target"要素を取得します。- 取得した要素の
scrollTo()メソッドを使って、要素の左上隅までスクロールします。 behavior: 'smooth'オプションを指定することで、滑らかなアニメーション付きのスクロールになります。
scrollIntoView() メソッドを使う
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>scroll into view example</title>
</head>
<body>
<h1>見出し1</h1>
<p>本文1</p>
<h2 id="target">見出し2</h2>
<p>本文2</p>
<button onclick="scrollIntoViewTarget()">要素にスクロール</button>
<script>
function scrollIntoViewTarget() {
const targetElement = document.getElementById('target');
targetElement.scrollIntoView({
behavior: 'smooth'
});
}
</script>
</body>
</html>
説明
このコードは、1. のコードとほぼ同じですが、scrollTo() メソッドの代わりに scrollIntoView() メソッドを使っています。
違い
scrollTo()メソッドは、アニメーションなしで一気にスクロールします。
window.scroll() プロパティを使う
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>window.scroll example</title>
</head>
<body>
<h1>見出し1</h1>
<p>本文1</p>
<h2 id="target">見出し2</h2>
<p>本文2</p>
<button onclick="scrollToTargetWithWindowScroll()">要素にスクロール</button>
<script>
function scrollToTargetWithWindowScroll() {
const targetElement = document.getElementById('target');
const offsetTop = targetElement.getBoundingClientRect().top;
const scrollTop = window.scrollY;
const distance = offsetTop - scrollTop;
window.scroll({
top: scrollTop + distance,
behavior: 'smooth'
});
}
</script>
</body>
</html>
getBoundingClientRect()メソッドを使って、id="target"要素のウィンドウ内における位置を取得します。window.scrollYプロパティを使って、現在のウィンドウのスクロール位置を取得します。- 要素までのオフセット量を計算します。
window.scroll()プロパティを使う方法は、柔軟性が高く、要素以外にもウィンドウ全体の位置を制御できます。
これらのサンプルコードを参考に、
JavaScript で要素にスクロールする方法：その他の方法
scrollBy() メソッドは、要素を指定した距離だけスクロールします。正の値を指定すると要素を下にスクロールし、負の値を指定すると要素を上にスクロールします。
element.scrollBy({
top: 100,
left: 0,
behavior: 'smooth'
});
requestAnimationFrame() 関数は、ブラウザのリフレッシュレートに合わせて関数を呼び出すための非同期 API です。この関数を用いて、アニメーション付きのスクロールを実現することができます。
function scrollToTargetAnimated(targetElement) {
const startTop = window.scrollY;
const targetTop = targetElement.getBoundingClientRect().top;
const distance = targetTop - startTop;
let elapsedTime = 0;
const duration = 500; // スクロールにかかる時間 (ミリ秒)
function step() {
elapsedTime += 16; // 1フレームあたりの時間 (ミリ秒)
const progress = elapsedTime / duration;
window.scrollTo({
top: startTop + distance * progress,
behavior: 'smooth'
});
if (progress < 1) {
requestAnimationFrame(step);
}
}
requestAnimationFrame(step);
}
anime.js や gsap.js などのライブラリを使用すると、より高度なアニメーション付きのスクロールを実現することができます。これらのライブラリは、様々なアニメーション効果やオプションを提供しており、複雑な動きを簡単に作成することができます。
例：anime.js を使う
anime({
targets: element,
scrollTop: targetTop,
duration: 500,
easing: 'easeInOutQuad'
});
javascript html
