兵庫県三田市でホームページ製作をしているゴリラドットです。

jqueryでページ内のスムーズなスクロールを実装しようとした際、「Uncaught Error: Syntax error, unrecognized expression: a[href^=#]」というエラーが出てきてスクロールできない！というときがあります。私も久しぶりに実装してハマりました。

ということでここではjqueryで実装するスムーススクロールで「Uncaught Error: Syntax error, unrecognized expression: a[href^=#]」というエラーが出ちゃった場合の解決方法を紹介しますね。

 

「a[href^=#]」をちょこっと変えて解決

これってjqueryのバージョンが影響してるエラーなんですよね。とりあえず解決方法から。

「$('a[href^=#]')」を「'a[href^="#"]'」に変更すればエラーがなくなり、無事スムーススクロールが有効になります。

ようは「#」をダブルクォーテーションで囲おう！というコト。

 

これにて無事解決！やったね！

 

jqueryエラーの原因は？

「Uncaught Error: Syntax error, unrecognized expression: a[href^=#]」というjqueryのエラー、解決はしたものの結局原因は何だったの？というのをサクッと書いておきますね。気になる人だけ読んでみてください。

 

上でもチラッと書いたんですが、このエラーはjqueryのバージョンの違いによって発生しています。

jqueryって昔は1.x系ていうのが主流…というかこれしかなった時代があって、その後2.x系それから3.x系といろんなバージョンのjqueryが増えて、今は1～3までいろんなバージョンのjqueryがそこかしこに転がってる状態なんです。

jquery1.x系は古いブラウザまでサポートしてる、とかそいういう違いがあるんですが、表記方法や対応もバージョンによって異なる部分があるんです。

今回jqueryでページ内スムーススクロールを実装するとき、たぶん誰か詳しい方が紹介してくれているjqueryソースコードをそのままコピペしたと思います。楽ですし一から自分でゴリゴリ実装するより実績あるコードの方が信頼おけますもんね。

ただこのネットで紹介されているjqueryコードは1.x系のものが多いんだと思います。なので今お使いのjqueryとバージョン差異があってうまくスクロールできなかった、と。

上ではjquery2.x、jquery3.xで有効な書き方、ダブルコーテーション「”」（ちょんちょんですね）で囲う書き方に変えて解決していますが、例えば読み込むjqueryを1.x系に変えてもスムーススクロールが有効になるハズです。

 

まとめ

jqueryでページ内スムーススクロールを実装しようとしたときに出てくる「Uncaught Error: Syntax error, unrecognized expression: a[href^=#]」というエラーについて解決方法を紹介しました。

まとめるとjqueryのバージョン差異によって起こってるから、ダブルクォーテーションで囲って解決しよう！という感じ。参考にしてみてくださいね。