jqueryでスムーススクロールを実装

お疲れ様です、webデザイナーに憧れるアラサー いずみです。
自分はコーディングもできるwebデザイナーになりたいので、学習しなければいけない範囲としては、

デザインの法則(座学)・illustrator や photoshopのデザイナー向けの基本操作・デザインのトレース・html と CSS・sass や jquery・wordpress・php(wordpress用)

この辺りになるかと思います。
範囲が広い事もさる事ながら、モチベーションを維持するのが一番大変かなと思います。

自分はゴールが見えないと頑張れないタイプなので、小さなゴールをたくさん設定して頑張っていきたいです。

今回はjqueryで、スムーススクロールを実装する方法を紹介します。
最近は CSSの発展が凄まじく、htmlタグに
scroll-behavior: smooth;   を指定するだけで簡単にスムーススクロールが実装できてしまいます。

今回は、昔ながらのやり方でスクロールスピードも設定できるjqueryによるスムーススクロールを紹介します。

コードはこちら↓

$('a[href^="#"]').on('click', function(){
//href属性が#から始まるaタグをクリックした時〜

  let href = $(this).attr('href');
  //aタグのhref属性、各セクションに付けたID

  let target = $(href == "#" || href == "" ? 'html' : href);
  //もしhrefが#のみ、または空欄の場合はターゲットをhtml要素にする。それ以外はhref自体をターゲットに設定
 
  let adjust = 80;
  //固定ヘッダーの時に、スクロール量を逃す用

  targetPos = target.offset().top - adjust;
  各セクションの一番上の位置(スクロールで止まる位置)。

  var speed = 600;
  スクロールスピード。単位はms(ミリ秒)

  $('html, body').animate({scrollTop: targetPos}, speed, swing});
  body要素をセクションの位置まで、指定したスピードでスクロール

  return false;
  デフォルトのaタグのリンク機能を削除
});

このような感じになります。

昔ながらのやり方ですが、cssで実装するよりもスピードの調整ができたりするのでオススメです