備忘録
##ハンバーガーメニューを展開したら 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"> になっている

ーーーーー

▼参考