offset().top が取得できない

Question

前提・実現したいこと

ページ内ナビゲーションを作っています。
メニューバーの「レッスン」ボタンを押して、id="lesson"までスクロールする動きを実装中にエラーメッセージが発生しました。

発生している問題・エラーメッセージ

Uncaught TypeError: Cannot read property 'top' of undefined

該当のソースコード

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

<header>
      <div class="container">
        <div class="header-left">
          <img class="logo" src="https://prog-8.com/images/html/advanced/main_logo.png">
        </div>
        <i class="menu-icon fas fa-bars"></i>
        <div class="header-right">
          <a href="#lesson" class="menu-lesson">レッスン</a>
          <a href="#">新規登録</a>
          <a href="#" class="login">ログイン</a>
        </div>
      </div>
    </header>

<div class="lesson-wrapper" id="lesson">
      <div class="container">
        <div class="heading">
          <h2>Learn Where to Get Started!</h2>
        </div>
        <div class="lessons">
          <div class="lesson">
            <div class="lesson-icon">
              <img src="https://prog-8.com/images/html/advanced/html.png">
              <p>HTML & CSS</p>
            </div>
            <p class="text-contents">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
          </div>
          <div class="lesson">
            <div class="lesson-icon">
              <img src="https://prog-8.com/images/html/advanced/jQuery.png">
              <p>jQuery</p>
            </div>
            <p class="text-contents">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</p>
          </div>
          <div class="lesson">
            <div class="lesson-icon">
              <img src="https://prog-8.com/images/html/advanced/ruby.png">
              <p>Ruby</p>
            </div>
            <p class="text-contents">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p>
          </div>
          <div class="lesson">
            <div class="lesson-icon">
              <img src="https://prog-8.com/images/html/advanced/php.png">
              <p>PHP</p>
            </div>
            <p class="text-contents">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p>
          </div>
        </div>
        <div class="clear"></div>
      </div>
    </div>

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

<a href="#">新規登録</a>
<a href="#" class="login">ログイン</a>
「#」の後に正しいアンカーを指定してください。
下記では「レッスン」と同じにしてあります。

    <header>
      <div class="container">
        <div class="header-left">
          <img class="logo" src="https://prog-8.com/images/html/advanced/main_logo.png">
        </div>
        <i class="menu-icon fas fa-bars"></i>
        <div class="header-right">
          <a href="#lesson" class="menu-lesson">レッスン</a>
          <a href="#lesson">新規登録</a>
          <a href="#lesson" class="login">ログイン</a>
        </div>
      </div>
    </header>

$('this')　→　$(this)　です。

$('header a').click(function(){
    var id = $(this).attr('href');
    var position = $(id).offset().top;

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

Comments

[hase_]

ご回答ありがとうございます。
無事に動作することができました！