以前に書いたページ内遷移にまつわる処理～の続き。

該当idが無いと、ほかのjsが止まる

存在しないidへ遷移しようとするとエラーが出ていました。

検証ウィンドウを開いていない限りエラーは見えないし、「ま、いいか」と思っていたのですが、、、

 

エラーが出た状態だとスライダー「slick」も止まっちゃうことに気が付きました。

jQuery依存のスクリプトはみんな共倒れなのかも。

 

開発中はこういうケースもままあり、遭遇するとギクリとします。

公開済みのサイトならそうそう出くわさないとは思いますが、パーマリンクが日本語のままだったりすると起き得るかも。

 

ということで、存在しないidへ遷移しようとしたら動作をキャンセルさせるように変更しました。

ソース

jQuery(function(){
var headerHight = 0;
	/* ---------- ページ内リンクの処理 ---------- */
	$('a[href^="#"]').click(function(){
		var href= $(this).attr('href');
		var hash_str = href.replace( '#' , '' );
		if(document.getElementById(hash_str) != null ) {
			var target = $(href == '#' || href == '' ? 'body' : href);
			var position = target.offset().top-headerHight;
			$('html, body').animate({scrollTop:position}, 550, 'swing');
			return false;
		} else {
			return false;
		}
	});
	/* ---------- 他ページ内リンクの処理 ---------- */
	var url = $(location).attr('href');
	if (url.indexOf('?id=') == -1) {
		return false;
	}else{
		var url_sp = url.split('?id=');
		var id_str = url_sp[url_sp.length - 1];
		var hash = '#' + url_sp[url_sp.length - 1];
		if(document.getElementById(id_str) != null ) {
			var target2 = $(hash);
			var position2 = target2.offset().top-headerHight;
			$('html, body').animate({scrollTop:position2}, 550, 'swing');
		} else {
			return false;
		}
	}
});

遷移先のページ内を検索し、該当idが存在するかどうかで条件分岐させています。

該当idがなければ何もしません。

リンク例

• このページ内 > 関連記事部へのリンク
• このページ内 > 存在しないIDへのリンク
• トップページ > フッターへのリンク
• トップページ > 存在しないIDへのリンク

 

ページ内外のページ途中遷移に対応した書き方がなかなか見つかりませんでした。

が、自分で書いてみるとjs入門書の前半に出てくる内容で処理できたので、「ホントにいいのか？」という気が若干しますが、今のところエラー・誤動作無し。