「Cannot read property ‘top’ of undefined」というエラーについて

個人的によく当たるエラーで「毎回何が原因だっけ？」と調べていたので忘れないようにメモ

「Uncaught TypeError: Cannot read property ‘top’ of undefined」エラーの原因

以下のエラーが出た場合は、offset().topで取得する対象がないため起きている可能性がある。

Uncaught TypeError: Cannot read property 'top' of undefined

僕の場合は、アンカーリンククリック時のスムーススクロール（ヌルっとスクロール）用のjsが原因だった。
例として、以下のようなスムーススクロールのコードを使っていると、起きる可能性がある。

$('a[href^="#"]').on('click', function(){
	var Target = $(this.hash);
	var TargetOffset = $(Target).offset().top;
	var Time = 700;
	$('html, body').animate({
		scrollTop: TargetOffset - 20
	}, Time);
	return false;
});

エラー起きるのは、クリック後のアンカーリンク先：$(this.hash)がない場合。

例としては、アンカーリンク：$('a[href^="#"]')はあるのにアンカーリンク先：$(this.hash)がない。そうすると、クリックした時に.offset().topでアンカーリンク先の位置を取得できないためCannot read property ‘top’ of undefined（未定義のプロパティ「top」を読み取れません）というエラーが発生する。

なので、アンカーリンク先が無い時を考えif文で条件分岐をかけることでエラーを回避することができる。

$('a[href^="#"]').on('click', function(){
  var Target = $(this.hash);
  // 条件分岐を追加
  if(Target.length){
    var TargetOffset = $(Target).offset().top;
    console.log(TargetOffset)
    var Time = 700;
    $('html, body').animate({
      scrollTop: TargetOffset - 20
    }, Time);
  }
  return false;
});

if(Target.length){ … }という、条件分岐をかけることでCannot read property ‘top’ of undefinedエラーを回避できる。