jQuery でページ内リンクを全てスムーズスクロールにしよう

phi phi on jQuery

jQuery の animate 関数を使ってページトップにスムーズスクロールするボタンを作ろう | phiary』の発展です.

前回は, ピンポイントで要素をスムーズスクロールしましたが, 今回はページ内リンクを持つ全ての要素を判別してすべてスムーズスクロールにする方法を紹介します.

Runstant Demo

今回作成したサンプルです.

Section のリンクを踏むとスムーズスクロールするのがわかるかと思います.

Code

html

目次となるアンカーと, ページトップに移動するアンカーを設置しています.

<body>  
  <h1 id='top'>jQuery でページ内リンクを全てスムーズスクロールにしよう</h1>

  <h2>Table of contents</h2>

  <ul>
    <li><a href='#section1'>Section 1</a></li>
    <li><a href='#section2'>Section 2</a></li>
    <li><a href='#section3'>Section 3</a></li>
    <li><a href='#section4'>Section 4</a></li>
  </ul>

  <h2 id='section1'>Section 1</h2>
  <p class='pad'>Text Text Text Text</p>
  <a href='#top'>▲top</a>

  <h2 id='section2'>Section 2</h2>
  <p class='pad'>Text Text Text Text</p>
  <a href='#top'>▲top</a>

  <h2 id='section3'>Section 3</h2>
  <p class='pad'>Text Text Text Text</p>
  <a href='#top'>▲top</a>

  <h2 id='section4'>Section 4</h2>
  <p class='pad'>Text Text Text Text</p>
  <a href='#top'>▲top</a>

  <br /><br /><br /><br />
  <br /><br /><br /><br />
</body>  

css

スクロール再現用の詰め物

.pad {
  height: 100px;
  margin-bottom: 4rem;
}

javascript

スムーズスクロール実装部分です.

$(function() {
  // スクロールのオフセット値
  var offsetY = -10;
  // スクロールにかかる時間
  var time = 500;

  // ページ内リンクのみを取得
  $('a[href^=#]').click(function() {
    // 移動先となる要素を取得
    var target = $(this.hash);
    if (!target.length) return ;
    // 移動先となる値
    var targetY = target.offset().top+offsetY;
    // スクロールアニメーション
    $('html,body').animate({scrollTop: targetY}, time, 'swing');
    // ハッシュ書き換えとく
    window.history.pushState(null, null, this.hash);
    // デフォルトの処理はキャンセル
    return false;
  });
});

Tips

jQuery でページ内リンクを持つアンカータグのみを取得

jQuery では属性セレクタで, その属性を持つ要素だったり属性の値が条件と
一致する要素のみを取得することができます.

今回は

$('a[href^=#]')

としています.

これは a タグでかつ href 属性が # で始まる要素のみを取得する処理です.

history.pushState を使おう

スムーズスクロールの場合はデフォルトの処理をキャンセルしているので, 普通のページ内リンクと違いハッシュタグが変更されません.

なので自分で設定する必要があるのですが, location.hash = hash としてしまうと 結局画面移動が起きてしまいます.

そこで使えるのが HTML5 から追加された history.poushState です. これは画面に影響を与えることなく url を変更することができるメソッドです.

今回は

window.history.pushState(null, null, this.hash);  

とすることで画面移動することなく url にハッシュタグを付与しています.

スムーズスクロール

こちらを参照下さい. jQuery の animate 関数を使ってページトップにスムーズスクロールするボタンを作ろう | phiary

Reference