jquery クリックでスクロール ~ヘルスケアwebサービスを自分で作る医者の日記~

開業予定のクリニックのwebサイト

wordpressでイチからテーマを起こして

phpで作成中

クリックするとスクロールするよくあるモノ
jquery で実装
こちらを参考にさせていただいた。

簡単なコードのはずだが、理解するのに時間がかかった。
三項演算子はともかく
target変数で取得したhrefの値
がなぜ移動した先を指定できるのかわからなかった。

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


});

<?php get_header(); ?>
    <!-- /header -->

<div class="container access-container">
    <h1 class="access-title"><i class="fas fa-walking"></i>　アクセス</h1>
    <p>hoge</p>
    <ul class="inline">
      <li>
        <a href="#01"><p>hoge</p></a>
      </li>
      <li>
        <a href="#02"><p>hoge</p></a>
      </li>
      <li>
        <a href="#03"><p>hoge</p></a>
      </li>
    </ul>
    <div class="gmap">
      <iframe src="hoge></iframe>
    </div>
    <h2 class="access-subtitle">住所</h2>
    <p>hoge</p>
    <h3>最寄駅</h3>
    <p>hoge</p>
    <h2 class="access-subtitle" id="01">hoge</h2>
      <div class="access-grid">
        <div class="access-grid-text1"><img　class="access-grid-text-num" src="<?php echo esc_url( get_theme_file_uri( 'images/sozai_cman_jp_20190901193050.png') )?>" alt= ""><p>hoge</p></div>
        <img　class="access-grid-image1" src="<?php echo esc_url( get_theme_file_uri( 'images/download-2.jpg'))?>" alt= "">
        <div class="access-grid-text2"><p class="">左に向かいます</p><img　class="access-grid-text-num" src="<?php echo esc_url( get_theme_file_uri( 'images/sozai_cman_jp_20190901193059.png'))?>" alt= ""></div>
        <img　class="access-grid-image2" src="<?php echo esc_url( get_theme_file_uri( 'images/170920204033_0.jpg'))?>" alt= "">
        <div class="access-grid-text3"><img　class="access-grid-text-num" src="<?php echo esc_url( get_theme_file_uri( 'images/sozai_cman_jp_20190901193027.png'))?>" alt= ""></div>
        <img　class="access-grid-image3" src="<?php echo esc_url( get_theme_file_uri( 'images/download-3.jpg'))?>" alt= "">
        <div class="access-grid-text4"><p>hoge</p><img　class="access-grid-text-num" src="<?php echo esc_url( get_theme_file_uri( 'images/sozai_cman_jp_20190901193032.png'))?>" alt= ""></div>
        <img　class="access-grid-image4" src="<?php echo esc_url( get_theme_file_uri( 'images/download-1.jpg'))?>" alt= "">
      </div>
    <h2 class="access-subtitle" id="02">hoge</h2>
      <div class="access-grid">
        <p>hoge</p>
        <img src="" alt="">
        <p>左に向かいます</p>
        <img src="" alt="">
        <p>左に向かいます</p>
        <img src="" alt="">
        <p>hoge</p>
        <img src="" alt="">
      </div>
    <h2 class="access-subtitle" id="03">(バス停)からお越しいただく場合</h2>
      <div class="access-grid">
        <p>バス停をでて左にでます</p>
        <img src="" alt="">
        <p>左に向かいます</p>
        <img src="" alt="">
        <p>左に向かいます</p>
        <img src="" alt="">
        <p>エレベータで会にお越しくださいスタンダードクリニックがございます</p>
        <img src="" alt="">
      </div>
</div>

    <!-- フッター -->
<?php get_footer(); ?>

それは、クリックした要素のhrefの値を#0hogeとしてるから
これによって 対応する移動先の id = "0hoge"を取得できるようにしている。
気づけば早いのだが、、、

だが最後に疑問、
{scrollTop: position}
とは何か？
プロパティの　"キー"と"値"を表しているのか？