PCとスマホでjavascriptの切り替えがしたい

Question

ページ内リンクの位置の調整がしたくて、とあるサイトを参考にjsファイルに以下の記述をしました。

// ページ内リンク位置調整
jQuery(function(){
var headerHight = 140; //ヘッダーの高さ
	//*ページ内リンク
	jQuery('a[href^=#]').click(function(){
		var href= jQuery(this).attr("href");
		var target = jQuery(href == "#" || href == "" ? 'body' : href);
		var position = target.offset().top-headerHight;
		jQuery("html, body").animate({scrollTop:position}, 550, "swing");
		return false;
	});
	//*ページ外リンク*/      
	var url = jQuery(location).attr('href');
	if (url.indexOf("?id=") == -1) {
		// ほかの処理
	}else{
		var url_sp = url.split("?id=");
		var hash     = '#' + url_sp[url_sp.length - 1];
		var target2	= jQuery(hash);
		var position2	= target2.offset().top-headerHight;
		jQuery("html, body").animate({scrollTop:position2}, 550, "swing");
	}
});

これはこれでちゃんと動いたのですが、PCとスマホでヘッダーの高さが違うので、別のサイトを参考に以下のように書き換えました。

// ページ内リンク位置調整
$(function(){
    var windowWidth = $(window).width();
    var windowSm = 640; //切り替える幅
    if(windowWidth <= windowSm) {
		var headerHight = 50; //スマホのヘッダーの高さ
    } else {
		var headerHight = 140; //pcのヘッダーの高さ
    }
	jQuery('a[href^=#]').click(function(){
		var href= jQuery(this).attr("href");
		var target = jQuery(href == "#" || href == "" ? 'body' : href);
		var position = target.offset().top-headerHight;
		jQuery("html, body").animate({scrollTop:position}, 550, "swing");
		return false;
	});
	//*ページ外リンク*/      
	var url = jQuery(location).attr('href');
	if (url.indexOf("?id=") == -1) {
		// ほかの処理
	}else{
		var url_sp = url.split("?id=");
		var hash     = '#' + url_sp[url_sp.length - 1];
		var target2	= jQuery(hash);
		var position2	= target2.offset().top-headerHight;
		jQuery("html, body").animate({scrollTop:position2}, 550, "swing");
	}
});

が、動かなくなってしまいました。
Dreamweaverでは

var headerHight = 140;

の行が赤くなっています。

どこが間違っているのでしょうか？？
アドバイスお願いします！

###追記
リンク元のコードはこんな感じです。

<p>詳細については<a href="/link/?id=link01">こちら</a>をご覧ください</p>

Comments

[hentaiman]

dreamwearverなんかよりブラウザのデバッグコンソールのエラー内容見た方が良くない？
あとCSSだけで出来そうなものならCSSで頑張った方がいいんじゃないかな

[yasutomi]

HTMLコードも質問に記載をお願いします。

[退会済みユーザー]

DreamWeaverはしりませんが、赤くなるということはエラーが出てるだろうので、
それを回避すればいいのでは。

[teraota27]

HTMLコードを「追記」に書きました。

はじめ、cssで実装しようとしましたがレイアウトが複雑なページだとどうしてもレイアウト崩れを起こして諦めました。。

[hentaiman]

複雑ならbootstrapとか使ったら楽よ

[teraota27]

ありがとうございます。bootstrapは知らなかったので調べてみます。

Answer 1

以下の方法の方がCSSだけでPC,SPの切り替えができるので楽です。
ヘッダ固定時のアンカーリンクずれ解消法

あとはどうしてもJSでやらなければならない理由があるなら、

• ブラウザのコンソールでエラーが出てないか確認する
• console.log(headerHight);とかやってちゃんと値が取れてるか確認する

とかやって原因を探っていくといいと思います。

あとheaderHightはheaderHeightだと思います。

Comments

[teraota27]

回答がりがとうございます！
headerHeightに修正いたしました。
コンソールからエラーを確認する方法も勉強していきたいと思います。

Answer 2

みなさま、ご回答ありがとうございました。
結果、ブラウザの幅でスマホ、PCのを判定するのはやめて、端末を判定して切り替える書き方で正しく動きました。

以下、長くなってしまいますが修正したコードです。

// ページ内リンク位置調整
if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
jQuery(function(){
var headerHeight = 60; //ヘッダーの高さ
	//*ページ内リンク
	jQuery('a[href^=#]').click(function(){
		var href= jQuery(this).attr("href");
		var target = jQuery(href == "#" || href == "" ? 'body' : href);
		var position = target.offset().top-headerHeight;
		jQuery("html, body").animate({scrollTop:position}, 550, "swing");
		return false;
	});
	//*ページ外リンク*/      
	var url = jQuery(location).attr('href');
	if (url.indexOf("?id=") == -1) {
		// ほかの処理
	}else{
		var url_sp = url.split("?id=");
		var hash     = '#' + url_sp[url_sp.length - 1];
		var target2	= jQuery(hash);
		var position2	= target2.offset().top-headerHeight;
		jQuery("html, body").animate({scrollTop:position2}, 550, "swing");
	}
});
} else {

jQuery(function(){
var headerHeight = 140; //ヘッダーの高さ
	//*ページ内リンク
	jQuery('a[href^=#]').click(function(){
		var href= jQuery(this).attr("href");
		var target = jQuery(href == "#" || href == "" ? 'body' : href);
		var position = target.offset().top-headerHeight;
		jQuery("html, body").animate({scrollTop:position}, 550, "swing");
		return false;
	});
	//*ページ外リンク*/      
	var url = jQuery(location).attr('href');
	if (url.indexOf("?id=") == -1) {
		// ほかの処理
	}else{
		var url_sp = url.split("?id=");
		var hash     = '#' + url_sp[url_sp.length - 1];
		var target2	= jQuery(hash);
		var position2	= target2.offset().top-headerHeight;
		jQuery("html, body").animate({scrollTop:position2}, 550, "swing");
	}
});
}

ありがとうございました。もし、もっとスッキリした書き方があれば教えていただきたいです。