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

とあるサイトで以下のようなエラーが出ててた。

Uncaught TypeError: Cannot read property ‘top’ of undefined

原因としては、モーダルを呼び出すjsコードとスムーススクロール（ヌルッと動くやつ）の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;
});

上記コードは、ハッシュタグ付きページ内リンク（a href=”#link01″←こんなの）をクリックしたら、リンク先にスムージングしながら移動するのだが、a[href^="#"]とすべてのページ内リンクが対象になっていたので、モーダル発火用のページ内リンク（アンカーリンク）は除外するように以下の.not()メソッドを追加します。

.not()メソッドを使って特定のページ内リンクを除外する

「.not()」メソッドを使って除外したのが以下です。

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

とりあえず、.not('除外するID,Class名')を追加して除外したらエラーが無くなりました。

まとめ

Uncaught TypeError: Cannot read property ‘top’ of undefined

上記エラーですが、ページ内リンクをクリックしたけど要素がない（呼び出すモーダルはdisplay:none;してた）から.offset().topでドキュメント上部を起点とした距離が取得できないということだと思う。

過去に「offset().top」でつまづいているので良かったらどうぞ

offset().topで位置がずれる件について

原因 .offset().topを使って上からの距離を取得してスムーズスクロールしながらリンク先まで移動する記述をしていたので、conso...

ちなみに、僕はめんどくさがり屋なので、「.not()」メソッドで回避してしまったのですが、しっかりやりたい人は以下のサイトが参考になるかも

▼jQueryでプラグインを使わずにそれなりにちゃんとしたスムーススクロールを実装する
http://webdesign-dackel.com/2015/04/11/jquery-smooth-scroll/