まず、同じページへのリンクには、#(id)を設定して aタグのhref属性を記載します。
しかしこのままだと、画面が一瞬で切り替わり、いったい、どこに移動したのかuserは理解しにくいです。
<li>
//ページ内リンク 移動先のidを指定
<a href="#pc_price">
<div class="pc_nav_list_item">
<h2>料金について</h2>
<p>PRICE</p>
</div>
</a>
</li>//移動する目的地
<section id="pc_price">
<div class="container">/ スクロール
$('a[href^="#"]').click(function(){
var speed = 500;
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
$("html").animate({scrollTop:position}, speed, "swing");
return false;
});では、１行ずつ説明しますね。
[ ] はセレクター。選択しています。
^は~で始まるという意味 href が # で始まるものを選択するという意味になります。
aタグのhref属性が # で始まるものを全部選択しなさい という意味になります。
公式サイトで確認するのは大切です。公式サイトはこちら
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Selectors
.clickはクリックされたときに関数を実行しなさいの意味になり、イベントを設定しています。
$はj、QueryでHTMLのDOM要素を取得するという意味になります。
でこの行は、aタグの hrefが#で始まるものみんな集めてきなさい。
そしてそれがクリックされたら、次の関数の内部の処理を実行しなさい
という意味になります。
//スクロールスピードは500msつまり0.5秒
var speed = 500;
//hrefという変数に、取得した属性のhrefの値を詰め込みなさい
var href= $(this).attr("href");
// 3項演算子 条件 trueなら ? 以下、falseなら : 以下を実行
// targetという変数には、hrefに記載している目的の移動先を代入
//空っぽのときと#だけのときは htmlを返す つまりなにもしない。nillチェックをしている
var target = $(href == "#" || href == "" ? 'html' : href);
//positionには、目的の移動先とページTOP位置との差分を代入しなさい
var position = target.offset().top;
//全体を[$("html, body")] 動かしなさい[animate]
//animate()関数については下記に説明しています。
//ターゲットのポジションの上まで移動しなさい。移動スピードは500, 移動はswingを利用しなさい(最初ゆっくり、その後少し早いスクロール)
$("html").animate({scrollTop:position}, speed, "swing");
//動いた後は何もしない
return false;jQuery offset()
このメソッドを使用すると、 document に対する.offset()要素 (具体的には、マージンを除くボーダー ボックス) の現在の位置を取得できます。
https://api.jquery.com/animate/#animate-properties-duration-easing-complete
jQuery animate()
説明: CSS プロパティのセットのカスタム アニメーションを実行します。
.animate( プロパティ [, 期間 ] [, イージング ] [, 完了 ] )
第1引数:アニメーションが移動する CSS プロパティと値のオブジェクト。
第2引数:アニメーションの実行時間を決定する文字列または数値。
第3引数：遷移に使用するイージング関数を示す文字列
第4引数:アニメーションが完了したら呼び出す関数で、一致した要素ごとに 1 回呼び出されます。結局このコードは、jQueryの animate() 関数を動かすために、いろいろな要素を集めていたという事になります。
プログラミングはこのように、やりたいこと（目的）があって、そのための要素を集める作業になります。
ではまた
