本日はスムーススクロールを作ります。
待ったなしで早速やっていきましょう。
時間が押しているので（汗
スムーススクロールとは
Webページのリンクやボタンをクリックした時に
シューッと目的の箇所まで移動するアニメーションに出会ったことがあるハズ。
あれが、スムーススクロールです。
どうやって作るの？
HTMLとjQueryで殆ど実現できます。
中でもHTMLのhref属性、id属性と、jQueryの要素の指定方法が注目ポイントです。
では、具体的に見ていきましょう。
まずはHTMLから
<header class="header">
<ul class="header__nav">
<li class="header__nav-item"><a href="#about">About</a></li>
<li class="header__nav-item"><a href="#map">Map</a></li>
<li class="header__nav-item"><a href="#contact">Contact</a></li>
</ul>
</header>
<section id="about">
～aboutのコンテンツ～
</section>
<section id="map">
～mapのコンテンツ～
</section>
<section id="contact">
～contactのコンテンツ～
</section>
<footer>
～footerのコンテンツ～
</footer>
今回は上記のHTMLを例に使っていきます。
ポイントとなる箇所は太字になっています。
href属性に「#」をつけて、id名を記述すると、クリックした時に該当箇所にジャンプしてくれます。
これの事を「ページ内リンク」というそうです。
そして、このページ内リンクに動きを付けたいので、jQueryを使って
「ページ内リンクをクリックしたら滑らかにシューッと移動する」
を実現していくわけですね。
jQueryで動きをつけよう
まずはコードから
$('a[href^="#"]').click(function() {
let speed = 400;
let point = $(this).attr("href");
let target = $("#" == point ? "html" : point );
let destination= $(target).offset().top;
$("html, body").animate( { scrollTop: destination }, speed );
});
いきなり難易度高くないですか？笑
いつものように1行ずつ見ていきましょう。
まず、
$('a[href^="#"]').click(function() {
これは、
href属性の最初の文字が「#」のaタグがクリックされたら括弧内の処理を実行します。
という意味です。
「^=」この部分が「最初の文字が」という指定方法で、他にも終わりの文字や、含んでいるか等の指定方法があります。
非常に便利そうなのでご紹介したいですが、今回は割愛します。
let speed = 400;
これはspeedという変数を定義して、そこに300という数値を代入しています。
この変数はアニメーションの速度を指定する為に定義しました。
因みに単位はm/sです。
let point = $(this).attr("href");
これはpointという変数を定義して、そこにクリックされたaタグのhref属性の値を代入しています。
let target = $("#" == point ? "html" : point );
これは、point変数に代入された値が「#」だったら、target変数に「html」という文字列を代入。そうでなければ、そのままpoint変数に格納されているhref属性の値を代入しています。
href属性が「#」のみの場合はアニメーションでページトップに移動させたいので、
移動先となる変数targetに「html」を代入しています。
let destination= $(target).offset().top;
これは、target変数に代入されている移動先の、ページトップからの位置を数値としてdestination変数に代入しています。要するに移動先要素のトップからのピクセル数です。これが「html」だと0になるので結果的に頭出しになるわけです。
$("html, body").animate( { scrollTop: destination }, speed );
ようやく最後です。
animate関数を使って移動させます。
第1引数の「scrollTop : destination」は
destination変数に代入された位置(ページトップからのピクセル)へ垂直移動という意味です。
そして、第2引数のspeedはそのままアニメーションの始まりから終わりまでにかかる時間です。
実際の流れを確認
href属性に「#map」が設定されいるaタグをクリックした時の動きを確認してみましょう。
クリックされたaタグのhref属性の最初の文字が「#」なので、
$('a[href^="#"]').click(function() {
の部分に該当し、処理が行われます。
speed変数に400が代入。
point変数にaタグのhref属性「#map」が代入。
point変数の中身が「#」のみではないので、target変数にそのまま「#map」が代入。
destination変数に<section id="map">のトップからの数値が代入される。
destination変数に代入された値の位置へ、
0.4秒かけて垂直方向に滑らかに移動する。
こんな感じです。
英字羅列だと？？？ですが、バラして見ていくと
わかりやすいと思います。
今日のまとめ
- スムーススクロールはページ内リンクに滑らかにスクロールしている
- ページ内リンクはhref属性に「#id名」で指定できる。
- 指定の方法には「=」以外にも存在し、先頭、終端、部分一致等がある
- jQueryのanimation関数で引数にページ内リンク先の垂直方向の数値を入れることでスクロール先を指定している。
今回はjQueryの内容がボリューム多かったですね。
ただ、この意味がわかって使っていればカスタマイズも迷わず出来るのではないでしょうか。
ワクワクしますね。
では、また。