Help us understand the problem. What is going on with this article?

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

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

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

phpで作成中

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

https://qiita.com/yuuuking/items/ac8e1b9c9a4f58a25333

簡単なコードのはずだが、理解するのに時間がかかった。
三項演算子はともかく
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}
とは何か?
プロパティの "キー"と"値"を表しているのか?

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away