簡単！jQueryでページ内リンクをスムーススクロールする方法

LPやページが長い時によく使われるページ内リンクをスムーススクロールさせる方法を備忘録もかねて書きます。
この記事のコードをコピペして実装してみてください！

早速、

HTML

 <ul>
    <li><a href="#section1">SECTION1</a></li>
    <li><a href="#section2">SECTION2</a></li>
    <li><a href="#section3">SECTION3</a></li>
    <li><a href="#section4">SECTION4</a></li>
    <li><a href="#section5">SECTION5</a></li>
  </ul>
  <div id="section1" class="box"><p>SECTION1</p></div>
  <div id="section2" class="box"><p>SECTION2</p></div>
  <div id="section3" class="box"><p>SECTION3</p></div>
  <div id="section4" class="box"><p>SECTION4</p></div>
  <div id="section5" class="box"><p>SECTION5</p></div>

各ボタンとリンク先のdivを記述しています。

CSS

ul{
  display: flex;
  padding:40px 0 0;
}
ul + div{
  margin-top:30vh;
}
ul li{
  list-style-type: none;
  padding-right:20px;
  padding-left:0;
}
ul li a{
  text-decoration:none;
}
div.box{
  height:300px;
  width:100%;
}
div.box p{
  font-size:24px;
}
.box:nth-child(2){
  background-color: #9FA1D9;
}
.box:nth-child(3){
  background-color: #CBB5DB;
}
.box:nth-child(4){
  background-color: #E3E4F5;
}
.box:nth-child(5){
  background-color: #8778D7;
}
.box:nth-child(6){
  background-color: #9B9BAB;
}

こちらのcssの記述は実装した時に分かりやすいように書いているだけなので、確認した後に消してください！！

script

 $(document).ready(function () {
      $('a[href^="#"]').click(function() {
        var offsetTop = 0;
        var scrollSpeed = 400;
        var href= $(this).attr("href");
        var target = $(href == "#" || href == "" ? 'html' : href);
        var scrollPosition = target.offset().top + offsetTop;
        $('body,html').animate({scrollTop:scrollPosition}, scrollSpeed);
        return false;
      });
    });

下記で簡単に解説をします！

イベント発動

$('a[href^="#"]').click(function() {

こちらはaタグがクリックされたらイベントが発動します。
対象要素の$('a[href^="#"]')と記述されている部分ですが、
「#から始まるhref属性を持つaタグ」をクリックしたらイベントが発動するという記述になります。

変数に値を代入

var offsetTop = 0;
var scrollSpeed = 400;
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var scrollPosition = target.offset().top + offsetTop;

各変数に値を代入しています。

・var offsetTop = 0;
→リンク先の要素の画面上部からの位置を調節します。

・var scrollSpeed = 400;
→スクロール開始してから移動先までの時間を指定します。

・var href= $(this).attr("href");
→クリックされたaタグのhref属性の値を変数に代入します。

・var target = $(href == "#" || href == "" ? 'html' : href);
→これは三項演算子という条件分岐です。上記でhrefに代入された値によって、hrefの値が変わります。
hrefの値が#もしくは'（空）'の場合は$('html')を変数に代入
hrefの値が#もしくは'（空）'以外の場合は$(href)を変数に代入

・var scrollPosition = target.offset().top + offsetTop;
→移動先の位置を指定しています。

スクロールのアニメーション

$('body,html').animate({scrollTop:scrollPosition}, scrollSpeed);
return false;

scrollTopに値(scrollPosition)を指定してスクロールさせます。スクロールスピードは先ほど指定した400ミリ秒です。
そしてreturn false;を指定することによってaタグのデフォルトの機能（リンク機能）を消しています。

まとめ

scriptの説明では分かりづらい単語もありましたが、必要に応じて調べていただければと思います。
説明部分で足りないところや、scriptでもっとこうした方がいいよー！などお意見をいただけたら嬉しいです！