アンカーリンククリック時のスムーズスクロール：JavaScriptとjQueryによる実装
2024-04-02
アンカーリンクをクリック時のスムーズスクロール
JavaScriptによる実装
1 概要
JavaScriptを用いる場合は、scroll-behaviorプロパティとwindow.scrollBy関数を使うことで、スムーズスクロールを実現できます。
2 コード例
const anchorLinks = document.querySelectorAll('a[href^="#"]');
anchorLinks.forEach((anchor) => {
anchor.addEventListener('click', (event) => {
event.preventDefault();
const target = event.target.getAttribute('href');
const targetElement = document.querySelector(target);
const scrollTop = targetElement.getBoundingClientRect().top + window.pageYOffset;
window.scrollBy({
top: scrollTop,
behavior: 'smooth',
});
});
});
3 解説
anchorLinks変数に、ページ内のすべてのアンカーリンクを取得します。- アンカーリンクをクリックした時の処理を
addEventListenerで設定します。 - デフォルトの動作を
preventDefaultで抑制します。 - クリックされたアンカーリンクのターゲット要素を取得します。
- ターゲット要素の
getBoundingClientRect().topプロパティで、画面上部からの距離を取得します。 window.scrollBy関数で、ターゲット要素までスムーズにスクロールします。
4 注意事項
- ターゲット要素が画面内に存在しない場合、意図しない動作になる可能性があります。
- スクロール速度はブラウザによって異なる場合があります。
jQueryによる実装
jQueryを使う場合は、animateメソッドを使うことで、より簡単にスムーズスクロールを実現できます。
$('a[href^="#"]').click(function(event) {
event.preventDefault();
const target = $(this).attr('href');
const targetElement = $(target);
$('html, body').animate({
scrollTop: targetElement.offset().top,
}, 500);
});
- ページ内のすべてのアンカーリンクに
clickイベントを設定します。 $('html, body').animateメソッドで、ターゲット要素まで500ミリ秒かけてスムーズにスクロールします。
- jQueryライブラリの読み込みが必要です。
- スクロール速度は
animateメソッドの引数で調整できます。
まとめ
JavaScriptとjQueryを用いて、アンカーリンクをクリック時のスムーズスクロールを実装する方法を紹介しました。
スムーズスクロール実装サンプルコード
JavaScript
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Smooth Scrolling Example</title>
</head>
<body>
<h1>見出し1</h1>
<p>コンテンツ1</p>
<a href="#section2">セクション2へ移動</a>
<h2 id="section2">見出し2</h2>
<p>コンテンツ2</p>
<a href="#section3">セクション3へ移動</a>
<h3 id="section3">見出し3</h3>
<p>コンテンツ3</p>
<script>
const anchorLinks = document.querySelectorAll('a[href^="#"]');
anchorLinks.forEach((anchor) => {
anchor.addEventListener('click', (event) => {
event.preventDefault();
const target = event.target.getAttribute('href');
const targetElement = document.querySelector(target);
const scrollTop = targetElement.getBoundingClientRect().top + window.pageYOffset;
window.scrollBy({
top: scrollTop,
behavior: 'smooth',
});
});
});
</script>
</body>
</html>
jQuery
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Smooth Scrolling Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>見出し1</h1>
<p>コンテンツ1</p>
<a href="#section2">セクション2へ移動</a>
<h2 id="section2">見出し2</h2>
<p>コンテンツ2</p>
<a href="#section3">セクション3へ移動</a>
<h3 id="section3">見出し3</h3>
<p>コンテンツ3</p>
<script>
$('a[href^="#"]').click(function(event) {
event.preventDefault();
const target = $(this).attr('href');
const targetElement = $(target);
$('html, body').animate({
scrollTop: targetElement.offset().top,
}, 500);
});
</script>
</body>
</html>
実行方法
- 上記のコードをHTMLファイルとして保存します。
- Webブラウザでファイルを開きます。
- ページ内のアンカーリンクをクリックすると、滑らかにスクロールする動作を確認できます。
注意事項
- 上記のコードは基本的な動作のみを実装しています。
- スクロール速度やアニメーション効果などを調整したい場合は、コードをカスタマイズする必要があります。
- 詳細については、JavaScriptやjQueryの公式ドキュメントを参照してください。
スムーズスクロール実装の他の方法
CSSのscroll-behaviorプロパティを使うことで、ページ全体のスクロールを滑らかにすることができます。
html, body {
scroll-behavior: smooth;
}
この方法は、アンカーリンクだけでなく、ページ内の任意の場所へスクロールする際に効果を発揮します。
注意点
scroll-behaviorプロパティは、すべてのブラウザでサポートされているわけではありません。
ライブラリの利用
Smooth Scrollなどのライブラリを使うことで、より高度なスムーズスクロール機能を実装することができます。
これらのライブラリは、以下のような機能を提供します。
- スクロール速度の調整
- アニメーション効果の追加
- スクロール時のページの動きを制御
- ライブラリの利用には、JavaScriptの知識が必要です。
フレームワークの利用
Vue.jsやReactなどのフレームワークを使う場合は、フレームワークが提供する機能を使ってスムーズスクロールを実装することができます。
- コンポーネント間のスムーズなスクロール
- フレームワークの利用には、フレームワークの知識が必要です。
スムーズスクロールを実装する方法はいくつかあります。
javascript jquery scroll
