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