【jQueryで解説】スムーススクロールでページ内リンクを遷移させる方法
PR ※当サイトではアフィリエイト広告を利用しています
「スムーススクロールの実装方法を知りたい。なるべくコピペで済ませたら嬉しいなぁ」
別ページに遷移した時のスムーススクロールがうまくいく方法を解説します。
今回はページ内をスクロールさせる「スムーススクロール」の方法を解説します。
スムーススクロールというのは、ウェブサイト上でのスクロールの動きを滑らかにするためのテクニックです
一般的には、ユーザーがページ内リンクをクリックするとその位置まで一瞬で飛ばずに、ゆっくりとその位置までスクロールする動きのことですね。
簡単なので、作り方さえ一度覚えてしまい、あとはコピペで使えるようにしておきましょう。
しかし、同一ページには簡単なのですが、複数ページを遷移した場合はまた挙動が変わってきます。
別ページに遷移した時にスムーススクロールをする方法はこちら
それでは早速見ていきましょう。
スムーススクロールでページ内リンクを遷移させる方法
それでは早速みていきましょう。
HTML
<a href="#test">出発地点</a>
<section id="test">
ここが到着地点です
<section>
まずは飛ばしたい部分のaタグにhref=”#xxx”と＃から始まる単語を入力します。
その後は到達地点にid=”xxx”と記述します。
ここではtestとしています。
- クリックの場所にaタグでid名を記述
- 到着地点のaタグにはid=”xxx”を記述
こういった感じですね。
これで準備は完了です。
jQuery
jQuery('a[href^="#"]').on('click', function() {
let navigationBarHeight = jQuery(".header").innerHeight();
let linkTarget = jQuery(this).attr('href');
let animationSpeed = 300;
let scrollPoint = 0;
if (linkTarget != '#') {
scrollPoint = jQuery(linkTarget).offset().top - navigationBarHeight - 65;
}
jQuery("html, body").animate({
scrollTop: scrollPoint
}, animationSpeed);
return false;
});
これを貼り付けてみてください。
そうすると、ぬるっと良い感じにスムーススクロールが発動すると思います。
このコードは主に内部リンク（ページ内リンク）をクリックしたときに、そのリンク先までスクロールする機能を実装しています。
リンクのhref属性が#だけでなければ、そのhrefに一致する要素までスクロールします。
また、ヘッダーの高さと65=65pxを引くことで、リンク先がヘッダーに隠れることを防ぎます。
そして、スクロールのスピードは300ミリ秒で一定の速度で実行されます。
解説
サクッと覚えていきましょう！
どんな風に動いてるかだけ確認しておくと、のちのち便利かなと思います。
jQuery('a[href*="/#"]').on('click', function() {
この行は、href属性が/#を含む全ての<a> タグ（つまりリンク）に対して、クリックイベントのリスナー（つまり反応する処理）を設定します。
let navigationBarHeight = jQuery(".header").innerHeight();
この行は、.headerクラスを持つ要素（通常はページのヘッダー）の内側の高さ（paddingを含むが、borderとmarginは含まない）を取得しています。
この高さは後でスクロール位置の計算に使われます。
高さがずれた場合はこの辺りをチェックしておくと良いかもしれません。
.innerHeightはPaddingを含み、borderとmarginを含まないので、この辺りがずれることがよくあります。
let linkTarget = jQuery(this).attr('href');
この行は、クリックされたリンク（this）のhref属性の値を取得します。
このhrefの値は後でスクロール先の要素を特定するために使われます。
let animationSpeed = 300;
この行は、スクロールアニメーションの速度を定義します。
ここでは速度は300ミリ秒に設定されているので、お好みのスピードに合わせてどうぞ。
let scrollPoint = 0;
この行は、スクロール先の位置（px単位）を定義します。初期値は0に設定されています。
if (linkTarget != '#') {
scrollPoint = jQuery(linkTarget).offset().top - navigationBarHeight - 65;
}
この部分では、hrefが#だけでない場合、スクロール先の要素の上端からの位置を取得し、それからヘッダーの高さと65ピクセルを引いた値をスクロール先の位置とします。
jQuery("html, body").animate({
scrollTop: scrollPoint
}, animationSpeed);
この部分では、ページ全体（html, body）をscrollTopの値がscrollPointになるようにアニメーションさせます。これにより、スムーズなスクロールが実現されます。アニメーションの速度は先に定義したanimationSpeedです。
return false;
この行は、リンクのデフォルトの動作（つまりリンク先へ即時ジャンプする動作）をキャンセルします。
return false;はリンクのクリックによるページ遷移（デフォルトのイベント行動）を防いで、スムーズスクロール（自前のイベント行動）を適用しています。
まとめ
いかがでしょうか？
少し難しかったかもしれませんが、簡単に仕様を覚えてあとはサクッとコピペで使えるようにしておきましょう。
他にも記事を見てみる
- スムーススクロールで別ページに飛んでも特定の位置まで正しくスクロールさせる方法
- 【jQuery/css】シンプルなアコーディオンメニュー【コピペOK】
- JavaScriptでモーダルウィンドウを表示させる方法【サンプル付きで解説】
- 【JavaScript】addEventListenerの種類一覧・使い方を紹介
合わせて読みたい記事
