jQueryを使った自作スムーススクロールでエラーが出る場合の対処法

「Uncaught Error: Syntax error, unrecognized expression: a[href^=#]」とエラーが表示されてしまう場合の解決策です。

このエラーは、ページ内のアンカーリンククリック時にスムーズなスクロール移動を実現する以下のようなjQueryを使ったコードを使用している場合などに発生します。

$('a[href^="#"]').click(function() {
	var speed = 500;
	var href = $(this).attr("href");
	var target = $(href == "#" || href == "" ? 'html' : href);
	var position = target.offset().top;
	$('body,html').animate({scrollTop:position}, speed, 'swing');
	return false;
});

これはjQuery2.x系で発生するエラーのようです。なのでjQuery1.x系を使っていた人が陥ってしまう可能性があります。

解決策としては、アンカーリンクのセレクタ部分をダブルクオーテーション(二重引用符)で囲むことで解決します。

//この#の部分を
$('a[href^=#]')

//こんな感じでダブルクオーテーションで囲む
$('a[href^="#"]')

同じ症状でお悩みの方はお試しになってみてください。

ページの先頭へ