スムーススクロールとは
スムーススクロールとは、Webサイトのページ内のリンクをクリックすると、すぅーっと目的の場所まで移動してくれる演出のことで、よく目次の中のリンクをクリックするときに見られる演出のことです。
その名の通りsmooth（滑らかな）scroll（スクロール）という意味のため、その滑らかさの演出のためにJQueryで移動のスピードを制御してあげる必要があります。
以下はスムーススクロールを演出するためのJQueryです。これをベースに使い回しできると思います。
$(function () {
jQuery('a[href^="#"]').on('click', function () {
let header = jQuery(".header").innerHeight();
let speed = 300;
let id = jQuery(this).attr("href");
let target = jQuery("#" == id ? "html" : id);
let position = jQuery(target).offset().top - header;
jQuery("html, body").animate(
{
scrollTop: position,
},
speed
);
return false;
});
});JQuery解説
2行目 – #から始まるリンクがクリックされた時 { }内の処理を実行せよ、の意味。^=は前方一致の意味。
3行目 – .headerクラスがついた要素の高さ分を取得
4行目 – 移動速度を指定（ミリ秒）。300は0.3秒。
5行目 – クリックされた’this’（このthisはa[href^=”#”]を指す）のhref属性の値を変数idへ代入
6行目 – idの値が”#”のみだったらhtmlタグをtargetへ代入し、そうでなければidをtargetに代入せよ、の意味。「?」と「:」が使われてて見慣れないですが、この「?」と「:」は条件演算子と呼ばれるものです。「＝」や「＋」は演算子として知られてますが、「?」と「:」を使えば条件式を作ることが可能になるので条件演算子となります。変数 = 条件式 ? 値1 : 値2; という構文で用いられ、条件式が合致していれば値１を変数に代入し、合致していなければ変数に値２を代入します。今回の場合だとidが#のみならば値1のhtmlをtargetに代入、そうでなければ値2のidをtargetに代入せよ、という指令内容になってます。
7行目 – offsetは指定した要素の左上を起点にするメソッド。ここでは各メニューページのトップを基準にターゲットの位置を取得。
8行目 – animateメソッドにより、クリックした目的の位置(positionに代入された位置)までspeedの速度で移動。animateについてはこちらを参照
14行目 – JQueryを無視して勝手にリンク先に飛んでいってしまわないようにブラウザの機能をOFFにする呪文のようなもので、あれこれ考えずにとりあえず記述しておけばOkです。詳しいことを知りたい方はこちらを参照して下さい。
コメント