[jQuery]押下したボタンのページ内リンクに飛ぶ。

押下したボタンのページ内リンクに飛ぶ

ご覧いただきありがとうございます！
jQueryを使用してページ内リンクへ飛ぶソースコードについて解説していきます。

まず、全体のコードがこちらです。

  $(function(){
    $('header a').click(function(){
      var id = $(this).attr('href');
      var position = $(id).offset().top;
      $('html, body').animate({'scrollTop':position},500);
      return false;
    };
  });

部分的に見ていきます。
まずはじめに、ボタンのクリックイベントを作る。

  $('header a').click(function(){

次に、変数「id」にクリックされたボタンの'href'属性の値を設定します。

   var id = $(this).attr('href');

そして、'href'の属性値が設定された「id」を使って画面Top〜ページ内のリンクまでの距離を変数「position」に、設定します。

   var position = $(id).offset().top;

最後に、animateメソッドの引数①scrollTopプロパティに先ほどのposition変数(Topからページ内リンクまでの距離）を設定し、引数②に500（ms）を設定します。

   $('html, body').animate({'scrollTop':position},500);

以上の流れで押下したボタンのページ内リンクに飛ぶことができます。

最後までご覧いただきありがとうございました！