ページ内リンクやトップへ戻るボタンを使い、ページ内をヌルヌルっとアニメーションスクロールする簡単な方法をご紹介します。
プラグインは使わず、少ない行数で実現できます。
ソースコードの解説も併せてご紹介しますので、プラグインに頼らず、自力で導入してみませんか？
目次
スムーススクロールのソースコード全文
まずはページ内リンクのソースコードを一気に全部ご紹介します。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<div class="box"> <ul> <!-- #から始まるページ内リンクを設定する --> <li><a href="#box1">リンク1へジャンプ</a></li> <li><a href="#box2">リンク2へジャンプ</a></li> </ul> <!-- 上のa要素をクリックするとこの位置までスクロールする --> <div id="box1"> <h2>リンク1へようこそ！</h2> <!-- #を設定したa要素をクリックするとページトップへスクロールする --> <p><a href="#">トップへ戻る</a></p> </div> <div id="box2"> <h2>リンク2はココだよ！</h2> <p><a href="#">トップへ戻る</a></p> </div> </div> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
$(function() { // ①aタグをクリックし、href属性に # から始まるリンクが設定してあったら発動 $('a[href^="#"]').click(function(){ // ②クリックしたaタグのhref属性（リンク先URI）を取得し、変数に格納 var href = $(this).attr('href'); // ③上で取得した値が#か空白だったら'html'を、それ以外だったら先ほど取得したhref属性の値を変数に格納 var target = $(href == '#' || href === '' ? 'html' : href); // ④変数targetのページトップからの位置を取得し、変数に格納 var position = target.offset().top; // ⑤scrollTopに上で取得した位置を設定し、ヌルヌルとスクロールさせる $('html,body').animate({scrollTop : position}, 500); // ⑥a要素のデフォルトの機能を無効化する return false; }); }); |
結果
ページ内の所定の要素までと、ページトップへのスムーススクロールを実現します。
以下のリンクよりサンプルを確認してください。
ソースコード解説
上記サンプルのソースコードを解説します。
①クリックイベントで発動
|
1 2 |
// ①aタグをクリックし、href属性に # から始まるリンクが設定してあったら発動 $('a[href^="#"]').click(function(){ |
jQueryのセレクタに<a>要素が指定されていますが、そのあとの[href^="#"]は「#（シャープ）から始まるhref属性」という意味です。
つまり、「#（シャープ）から始まるhref属性を持つ<a>要素」をクリックしたらイベントが発動します。
jQueryのバージョンが新しくなると、上記のように#（シャープ）に""（ダブルクオーテーション）を付けないとエラーになります。
②クリックしたa要素のhref属性(リンク先URI)を取得
|
1 2 |
// ②クリックしたaタグのhref属性（リンク先URI）を取得し、変数に格納 var href = $(this).attr('href'); |
$(this)はクリックした a要素 を指します。
attr('href')でその<a>要素のhref属性を取得し、変数hrefに格納しました。
③三項演算子で条件分岐
|
1 2 |
// ③上で取得した値が#か空白だったら'html'を、それ以外だったら先ほど取得したhref属性の値を変数に格納 var target = $(href == '#' || href === '' ? 'html' : href); |
三項演算子と呼ばれる条件分岐の書き方で、1行で書けるのでif文よりも簡単に書くことが出来ます。
上記②で変数に格納したhref属性の値によって、以下のように条件分岐します。
- ②の値が「
#（シャープ）か空白」だったら => セレクタ$('html')を変数target に格納 - ②の値が「
#（シャープ）か空白 以外」だったら => ②で格納した変数をセットしたセレクタ$(href)を、変数targetに格納
④ページトップからの位置を取得
|
1 2 |
// ④変数targetのページトップからの位置を取得し、変数に格納 var position = target.offset().top; |
③で格納したセレクタの位置をoffset().topで取得し、変数positionに格納します。
後ほどこの値を使って、実際にその位置までスクロールさせます。
ちなみに、③で格納した変数targetの中身が$('html')だったら0が取得されます。
$(href)だったら、ページ内リンク先の要素の位置が取得されます。（560など）
⑤実際にスクロールさせる
|
1 2 |
// ⑤scrollTopに上で取得した位置を設定し、ヌルヌルとスクロールさせる $('html,body').animate({scrollTop : position}, 500); |
④で取得したトップからの位置をscrollTopに指定し、animate()で500のスピードでスクロールさせます。
scrollTopに値を指定すると、その位置までスクロールしてくれます。
animate()に指定した500は500ミリ秒（0.5秒）かけてスクロールするという意味です。
ここに'swing'などを設定することで、よりフワッとした自然なイージングが効いたスクロールも可能です。
参考：scrollTop() で特定の位置までスクロールする
ちなみに、セレクタに$('html, body')と両方指定していますが、これはブラウザによって挙動が違うためです。
詳しくは以下の記事をご覧ください。
⑥a要素のデフォルトの機能を無効化する
|
1 2 |
// ⑥a要素のデフォルトの機能を無効化する return false; |
return falseは要素が持つ機能（<a>要素はリンクする）を無効化します。
フォームのsubmitボタンを無効化する際などにもよく使われますね。
これによりページ内リンクしても、URLの末尾に #◯◯といったハッシュが付きません。
逆に、ページ内リンクをさせる際に #◯◯のようなハッシュを敢えて付けたい場合はreturn falseを削除すればOKです。
