0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-06-01

備忘録
##ハンバーガーメニューを展開したら smooth-scroll でエラー吐かれた

Uncaught TypeError: Cannot read property ‘top’ of undefined

####発生状況
・レスポンシブで、SP時はハンバーガーメニュー(下層階層の開閉あり)を使用
・スムーズスクロールを使用

####▼修正前 smooth-scroll用のjsはこんな↓設定
PC/SP共に固定ヘッダーなので、それぞれ高さ指定していしていますが、特に変わったことはしていません。

jQuery(function(){
    var windowWidth = $(window).width();
    var windowSm = 768;
		if (windowWidth <= windowSm) {
        var headerHight = 65;
	} else {
        var headerHight = 180;
	}
    jQuery('a[href^=#]').click(function() {
		var speed = 1000;
		var href= jQuery(this).attr("href");
		var target = jQuery(href == "#" || href == "" ? 'html' : href);
		var position = target.offset().top - headerHight;
		jQuery('body,html').animate({scrollTop:position}, speed, 'swing');
		return false;
	});
});

が、ハンバーガーメニューを展開させると Uncaught TypeError: Cannot read property ‘top’ of undefined のエラーが発生しました。(PC版ではメガメニューを使用していますが、オンマウスで展開する形式なのでひっかからなかったらしい?)

エラーが出ているのは、var position = target.offset().top - headerHight; です。
ハンバーガーメニュー内にスムーズスクロールは関係ないはずなのに、ハンバーガーメニューを展開するとエラーが出る。
これは、#や空白リンクを多用している所為ですね。。。jsあるあるです。

###なので、エラーの原因をスムーズスクロールから除外すれば良いだけでした

####▼修正後

jQuery(function(){
    var windowWidth = $(window).width();
    var windowSm = 768;
		if (windowWidth <= windowSm) {
        var headerHight = 65;
	} else {
        var headerHight = 180;
	}
    jQuery('a[href^=#]').not('.hoge a[href^=#]').click(function() {
		var speed = 1000;
		var href= jQuery(this).attr("href");
		var target = jQuery(href == "#" || href == "" ? 'html' : href);
		var position = target.offset().top - headerHight;
		jQuery('body,html').animate({scrollTop:position}, speed, 'swing');
		return false;
	});
});

今回の場合は、ハンバーガーメニューをマルッと除外する設定.not('.hoge a[href^=#]')を追加することで解決しました。(.hogeはハンバーガーメニューの大枠のclass名です。)
ハンバーガーメニューで下層を開閉させるためのトグルスイッチ(#リンク)が原因なので、.hoge内の # リンクを除外することでエラーの原因を削除できました。

ちなみに...、よく分かっていない人がやるであろう対応もやってます(よく分かってないので 笑)

1) とりあえず全カットするとエラーは出なくなる(当たり前)
2) レスポンシブ用の - headerHightをカットしても変わらず(ですよね〜関係ないし)
3) エラーの行をマルッとカットすると、そもそも動作なくなる(そらそーだ)
4) jQueryのバージョンを変えてみた(バージョンによって動作する/しないが確認できただけ)
5) 記述を確認・・・jQueryのバージョンによって影響を受けるらしい <a name="hoge"> ではなく、<a id="hoge"> になっている

ーーーーー

▼参考

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?