ページ内リンクにスクロールアニメーションをつける

October 25, 2018

最近ではもはや当然のページ内リンクをクリックするとスルスルーっと移動するアニメーションの実装の仕方を紹介しようと思います。

HTML

<a href="#top">トップへ移動</a>

HTML側は特別な設定は必要ありません。
普通にページ内リンクを貼るだけでokです。

javascript

※実装にはjQueryを利用しますので必要であれば以下からどうぞ。

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

以下のコードをHTMLの</html>の前くらいに貼り付けましょう。

<script>
  $(function () {
    $('a[href^="#"]').click(function () {
      var time = 500;
      var href = $(this).attr("href");
      var target = $(href == "#" || href == "" ? 'html' : href);
      var position = target.offset().top;
      $("html,body").animate({ scrollTop: position }, time, "swing");
      return false;
    });
  });
</script>

これでページ内にあるすべてのページ内リンクをクリックするとスルスルーっとスクロールするアニメーションが実装できました。
自分でクリックしまくって確認しましょう。

少ない例だとは思うのですがページ内リンク先のidにセレクタの文字が含まれているとうまく動作しないことがあるのでその場合は以下のコードに変えて試してみて下さい。
筆者はこれで若干ハマりました。

<script>
  function selectorEscape(val) {
    return val.replace(/[ !"$%&'()*+,.\/:;<=>?@\[\\\]^`{|}~]/g, '\\$&');
  }
  $(function () {
    $('a[href^="#"]').click(function () {
      var time = 500;
      var href = $(this).attr("href");
      var target = $(href == "#" || href == "" ? 'html' : selectorEscape(href));
      var position = target.offset().top;
      $("html,body").animate({ scrollTop: position }, time, "swing");
      return false;
    });
  });
</script>

やっていることとしては、セレクタ文字が含まれる場合にそれをエスケープしています。

ちなみにvar time = 500;の所でスクロールのスピードをコントロール出来ます。
数字が小さい方が素早くスクロールします。
お好みの速さに設定して下さい。