今回は、CSSとjQueryでスムーススクロールを実装する方法について、解説していきます。
コンテンツ
スムーススクロールとは
スムーススクロールとは、スクロール処理をスムースに（滑らかに）行うことです。
スムーススクロールは主に、以下のような場面で実装されます。
- リンクをクリックして、同ページ内のコンテンツに移動する
- ページトップボタンをクリックして、ページのトップへ移動する
スムーススクロールを実装していない場合
See the Pen
スムーススクロールしない場合 by 田村翔 (@geqvzwon-the-typescripter)
on CodePen.
スムーススクロールを実装していない場合の動作を確認してみてください。
ボタン（ナビ、TOPへ戻る）をクリックすると、一瞬でリンク先のコンテンツに移動すると思います。
この移動を滑らかにしたい場合に、スムーススクロールを実装します。
CSSでスムーススクロール
実装サンプル
See the Pen
【CSS】スムーススクロール by 田村翔 (@geqvzwon-the-typescripter)
on CodePen.
解説
CSSでスムーススクロールを実装する方法は非常に簡単で、下のコードを記述するだけです。
html {
scroll-behavior: smooth;
}
たったこれだけでスムーススクロールを実現できるので、サクッと実装したいときにおすすめです。
しかし、CSSでのスムーススクロール実装は簡単な反面、下記デメリットが存在します。
- スクロール位置の調整ができない
- スクロール速度の調整ができない
- 等速が変速かの調整ができない
案件によって微妙な調整が求められることがあるので、そういった時はCSSではなくjQueryを使いましょう。
jQueryで実装すれば、これらのデメリットはすべて解決します。
jQueryでスムーススクロール
実装サンプル
See the Pen
【jQuery】スムーススクロール by 田村翔 (@geqvzwon-the-typescripter)
on CodePen.
jQuery
まずはjQueryのコードをご覧ください。
$(function() {
// #で始まるアンカーリンクをクリックした時
$('a[href^="#"]').on('click', function() {
// href属性の値を取得
var href = $(this).attr("href");
// 移動先を取得
var target = $(href == "#" || href == "" ? 'html' : href);
// 移動先のポジション調整
var adjust = 0;
// 移動先ポジションの決定
var position = target.offset().top + adjust;
// スクロールの速度
var speed = 500;
// スクロールのタイプ
var type = 'swing';
// animate関数でスムーススクロール
$('html, body').animate(
{scrollTop:position},
speed,
type
);
return false;
});
});
animate()関数
jQueryでスムーススクロールを実装する場合はanimate()関数を使用します。
animate()関数には下記の引数を指定することができます。
これらの引数に値を入れることで、スクロールの調整を行います。
- 第一引数：
properties→ CSSのプロパティやアニメーションの動作 - 第二引数：
duration→ アニメーションの時間 - 第三引数：
easing→ アニメーションの緩急
第一引数：properties
今回第一引数に指定するのは、上部からのスクロール量です。
scrollTopメソッドを使用し、下記の流れで取得した値に基づいて、スクロール量を決定します。
- ①href属性の値を取得
- ②取得したhref属性に基づいて、移動先を決定
- ③移動先のポジションを調整
- ④最終的な移動先ポジションを決定
// ①href属性の値を取得
var href = $(this).attr("href");
まず、クリックしたアンカーリンクのhref属性を所得します。
attr()関数で、HTML要素の属性を取得することができます。
// ②取得したhref属性に基づいて、移動先を決定 var target = $(href == "#" || href == "" ? 'html' : href);
次に、取得したhref属性を元に移動先を決めます。
href属性が「#」あるいは空のときは「html」、そうでない時は①で定義した値をtargetに代入します。
// ③移動先のポジションを調整 var adjust = 0;
移動先の位置を微調整したい場合はここで調整します。
値に正の数を入れると上に、負の数を入れると下にポジションが移動します。
// ④最終的な移動先ポジションを決定 var position = target.offset().top + adjust;
最後に移動先ポジションを決定します。
target.offset().topとすると、ページの一番上から、指定した要素までの距離を取得することができます。
これに調整分のadjustを追加し、positionに代入します。
上記の流れで移動先の位置を取得し、定義したpositionをscrollTopの値にセットします。
$('html, body').animate(
{scrollTop:position}, // properties
speed,
type
);
第二引数：duration
第二引数には速度を指定します。
// スクロールの速度 var speed = 500;
こちらで定義した変数speedをanimate()関数の第二引数として記述します。
第三引数：easing
第三引数にはイージングを指定します。
イージングとはアニメーションの緩急のことです。
基本的にswingかlinearを指定します。
swing→ 速度が可変linear→ 一定の速度
// スクロールのタイプ var type = 'swing';
こちらで定義した変数typeを、animate()関数の第三引数として記述します。
以上で、animate()関数にすべての引数を記述できました。
// animate関数でスムーススクロール
$('html, body').animate(
{scrollTop:position},
speed,
type
);
これでスムーススクロールを実現することができます。
まとめ
以上、CSSとjQueryでスムーススクロールを実装する方法について解説しました。
スムーススクロールをサクッと実装したいときはCSS、細かく調整したいときはjQueryを使いましょう。
最後までお読みいただきありがとうございました！
（参考サイト）
スムーズスクロール（スムーススクロール）とは
