トップへ戻るボタンが表示されない!jQueryのエラーが出たらどうすればいい?
目次
トップへ戻るボタンが表示されない
jQueryでスムーズスクロールを設定していました。
下へスクロールするとトップへ戻るボタンが表示され、クリックするとスルーっと上へあがっていくアレです。
トップページに実装した時は通常通りエラーも出ずスルーっと動いてくれていましたが、他のページに実装したらボタンが表示されず、以下のエラーメッセージが!
▼エラーメッセージ
Uncaught TypeError: Cannot read property ‘top’ of undefined
Google翻訳さんによるとどうやら「未定義のプロパティ ‘top’を読み取ることができません」と言っているようです。
困りました。
エラーが出たjQueryコードは以下の通り。
▼エラーが出たコード
$(function(){
var box = $(“.nav”);
var boxTop = box.offset().top;
$(window).scroll(function () {
if($(window).scrollTop() >= boxTop) {
box.addClass(“fixed”);
$(“body”).css(“margin-top”,”0px”);
} else {
box.removeClass(“fixed”);
$(“body”).css(“margin-top”,”0px”);
}
});
});
この中の「offset().top;」という記述に問題があったようで、以下のコードに書き換える事で解決しました。
▼以下のコードに置き換えると解決。
var top = ($(‘.content-nav’).offset() || { “top”: NaN }).top;
if (isNaN(top)) {
} else {
alert(top);
}
参考サイト
jQueryが使えなかった場合の対処法
スルーっと上へ上がる動きを諦めるかと一瞬頭をよぎりましたが、意外とすんなり解決できて良かったです。
備忘録として残しておきますので同じエラーが出た方の解決策になれば幸いです。
また、もっとスマートなやり方があれば教えてください。
カテゴリ:jQuery
タグ: