jQueryでスムーススクロール ※コピペ対応
するする〜とスムーススクロールでページ内を移動するようにします
スムーススクロールの利点は、ページ内を移動したとユーザーが分かりやすいところにあり、ただのページ内リンクでは、パッと画面が変わった（ように感じる）ので、ユーザーがどのページにいるのか分からなくなります
スルスルーと動けば、ページ内を移動したのね！と分かります
以前紹介したcssプロパティを使う方法は草案なもんでブラウザの対応が悪かったりと、不便をかけたと思いますが、今回はどのブラウザでも対応可能になっているので安心してご利用できます
この記事の目次
使うセレクタ
今回animateでスクロールをかけるとき、セレクタは「$(“html,body”)」とする形で固定しています。
この時どのセレクタに対して実行すべきかはブラウザごとに異なります。簡単に言うとWebKitではbodyに効き、それ以外のブラウザではhtmlに効きます。
使うメソッドとプロパティ
一応使うものの説明を簡単に書き残しておきます。scrollTopプロパティ
scrollTopはメソッドで以前紹介しましたが、animateメソッド内ではプロパティとして扱うことができます。
‘scrollTop:○○’で、画面上から○○px移動する(上のコードなら、400移動する)
今回は、クリックした場所に応じてこの値が変わればOK
attr()メソッド
属性値を取得するメソッド。（）の中には、取得したい値の属性名を入れる
offset()メソッド
要素の位置を取得できる（{top: ○○, left: △△}）
- offset().top:上からの距離だけ取得
- offset().left：左からの距離だけ取得
手っ取り早くコピペ用コード
どうぞ コメント入れてあります
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
$(function () { $('a[href^="#"]').on('click', function () {//href属性の中身が#から始まる形だったら var href = $(this).attr('href');//href属性の中身を変数に入れる var target;//移動先を入れるための変数を作り if (href == '#' || href == '') {//取得したhrefの中身が「#だけ」もしくは「空」だったときの処理 target = $('html');//移動先はページ上部にするためhtmlをjQueryオブジェクトにし変数へ } else {//それ以外の場合は target = $(href);//取得したhref属性の中身をjQueryオブジェクトにし変数へ } var posi = target.offset().top; //取得したhrefの上からの距離を取得して変数に入れる $('html,body').animate({ 'scrollTop': posi }, 500);//animateメソッドで移動 return false;//URLを書き換えたくないときはa要素の動きを止める }); }); |
少しかみ砕いて各行ごとに解説
1行目
|
1 |
$('a[href^="#"]').on('click', function () { |
この指定でhref属性の中身が#から始まるa要素をクリックしたときに絞ってイベントの指定をしています
2行目
|
1 |
var href = $(this).attr('href'); |
ページ内リンクはid名で指定されていますよね。
でもid名って人によって付け方が違ってきますよね
どんな名前になっても大丈夫なように変数にhrefの値を都度代入するようにしました。
3～8行目
|
1 2 3 4 5 6 |
var target; if (href == '#' || href == '') { target = $('html'); } else { target = $(href); } |
あらかじめ変数を作っておいて、移動先のjQueryオブジェクトを入れる入れ物を用意しています。
取得したhref属性の中身に応じて処理を変えるためにif文を使って状況に応じて中身を変えるようにしています。
true側の処理
条件式に入れたものは取得したhrefが「#だけ」もしくは「空っぽ」だったらtrueという式になっています。（そもそも空っぽだった場合は動きませんが念のため）
そんな時はhtml要素をjQueryオブジェクトにしてtopに戻るようにしておきます
false側の処理
中身にしっかりとしたページ内リンク用の記述があった場合は、「#○○」の形の文字列になっています。
これを$()関数に入れるとそのままidセレクタとして扱うことができるので後々役立ちます
よくスムーススクロールで検索すると
「$(href == ‘#’ || href === ” ? ‘html’ : href);」
のような書き方がされている場合がよくあります
三項演算子という条件分岐の方法で分かりずらいかとおもいますので、ここではif文にしています。
内容としては『$(href == ‘#’ || href === ”』部分が条件式、「?」のあとの『’html’』がtrue、「:」のあとの『href』がfalseの処理となっていますので、『href』の内容が「#」か「空」だったら『’html’』それ以外なら『href』という形になります
9行目
|
1 |
var posi = target.offset().top; |
変数に入れたhref属性に入っていた移動先が上から何pxの位置にあるかを調べて、変数に入れています
10～12行目
|
1 2 3 |
$('html,body').animate({ 'scrollTop': posi }, 500); |
animateメソッド使って移動させています
上の方でも紹介していますが、scrollTopプロパティを使うと指定した位置まで移動できるので、それを使って調べた位置まで移動させています。
13行目
|
1 |
return false; |
ここではURLを書き換えたくなかったので、a要素の動きを止めるために入れています。
URLを書き換えるのであればこの行は削りましょう。
所々端折った紹介ですがこんな感じでスムーススクロールは作れます。 参考にどうでしょうか
「後々大変にならないように、最初にちょっと頑張って書く」
「怠けるために最大限の努力をする」
