jQueryでスムーズにページ内リンクを移動する方法

ページ内のリンクになにも設定しない場合、アニメーション無しでカクッと切り替わっちゃって大変不格好。
そんな不格好なページ内リンクを優しくするする～っと移動する方法をご紹介します。
下のコードをjsファイルに張り付けると、ページ内リンクのaタグ全てにスムーススクロールが適応されます。
いまいち動きが分からない方へ、実際にスムーススクロールを使ったdemoも載せておきますので、
ご確認していただけると伝わりやすいかもしれません。

【jQuery】

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

【なにも設定しない場合】

See the Pen
スムーススクロール無し by endebataro (@endebataro)
on CodePen.

【aタグにスムーススクロールを追加した場合】

See the Pen
スムーススクロール有り by endebataro (@endebataro)
on CodePen.