【jQueryトラブル解決】スムーススクロール実装で突然エラー？原因と正しい対処法を丁寧に解説

Webサイト制作では、ページ内リンクにスムーススクロールを実装する場面はよくあります。しかし、実装方法によっては「突然 JavaScript エラーが出て動かなくなる」というトラブルが発生することがあります。

今回は、特に発生しやすい jQuery スムーススクロールまわりのエラー をテーマに、原因と再発しないための安全なコードをご紹介します。

ページ内リンクのスムーススクロールで起きる“あるあるエラー”とは？

ある日 Webサイトを確認していると、コンソールにこんなエラーが表示される場合があります。

Error: Syntax error, unrecognized expression: [サンプル外部URL]

これは jQuery が 「セレクタとして認識できない文字列を渡された」 という意味です。

セレクタとは #id名 や .class名 のように、CSS でお馴染みの選択ルールのことです。
ところが jQuery に対して、意図せず 外部サイトURL や アンカー付きURL をセレクタとして渡してしまうと、このエラーが発生します。

なぜ URL が jQuery のセレクタとして扱われてしまうのか？

原因はスムーススクロールの対象リンクの指定方法にあります。

ページ内リンクを指定する際に、
よくあるのが「href に # が含まれるリンクをすべて対象にする」という書き方です。

たとえば、

• href="#section1"
• href="#top"

これらは正しいページ内リンクですが、

• https://sample-site.com/info#data
• https://maps.example.com/#review

このように 外部URLでも “#” が含まれるリンク は珍しくありません。

すると jQuery は外部URLまで対象にしてしまい、
その URL を CSS セレクタとして解析しようとしてエラーになる のです。

実際の Web 制作で起こりやすいシチュエーション

スムーススクロールを導入しているサイトで、以下のようなリンクが追加された場合に発生します。

• 地図サービスのレビューリンク（# が入る）
• SNS の投稿リンク（パラメータ内に # が入る）
• 外部サイトの特定セクションを指す URL

これらを意図せず jQuery が “ページ内リンク” と誤認してしまうのがトラブルの原因です。

エラーを避けるための“最適なスムーススクロールの書き方”

ポイントは以下の3つです。

① 「“# で始まる” ページ内リンク」のみを対象にする

外部URLの多くは「https://〜」で始まります。
そのため、ページ内リンクは href^="#"（# で始まる） に絞ることで安全に判定できます。

② href="#" だけのリンクは無視する

メニュー展開用の “ダミーリンク” として href="#" を使うケースは多いため、スクロール対象にしないのが正解。

③ 対象の ID 要素が実際に存在するかチェックする

href="#abc" であっても、id="abc" がページに存在しない場合があります。
その場合もスルーすることでエラーを回避できます。

誰でも安全に使えるスムーススクロールコード（完全版）

以下は上記3つのポイントをすべて盛り込んだ安全なコードです。

$(function() {
  $('a[href^="#"]').on('click', function(e) {
    const href = $(this).attr('href');

    // 空の # は無視
    if (href === "#") return;

    // 対象要素が存在しない場合も無視
    const $target = $(href);
    if ($target.length === 0) return;

    e.preventDefault();
    $('html, body').animate({
      scrollTop: $target.offset().top
    }, 500, 'linear');
  });
});

このコードなら“外部リンク追加時の事故”を確実に防げる

この対策を行うと以下のメリットがあります。

• 外部URLを誤ってセレクタとして解釈しない
• どれだけ外部リンクが追加されても安全
• CMS（WordPressなど）の編集担当者が自由にリンクを貼っても問題なし
• 予期せぬ JavaScript エラーによるサイト崩れを防げる

特に複数メンバーで運用する Web サイトでは、
予期しないリンクが追加される機会も多く、非常に安心できる実装です。

実務での注意点とおすすめの運用方法

外部リンク判定は“必ず厳しめ”にする

href*="#" のような「# を含むなら全部」という判定は事故の元です。

スムーススクロールは最低限のコードで書く

フレームワークや巨大ライブラリを入れる必要はありません。

固定ヘッダーがある場合は高さ調整を追加するとさらに親切

必要なら調整コードも追加できます。

まとめ：安全なスムーススクロールでエラーと無駄なデバッグを防ぐ

本記事のポイントをまとめると次の通りです。

• jQuery のスムーススクロールは書き方によって外部URLまで誤判定する
• その結果、jQuery が URL を CSS セレクタと誤解してエラーが出る
• “# で始まるリンクのみに限定する” のが最も安全で確実
• 空の # や存在しない ID にも対応できるように書くとトラブルゼロ

Webサイト運用中の「突然のエラー」は、制作側・運用側ともにストレスになります。
今回紹介したような安全な書き方にすることで、将来のトラブルを未然に防ぐことができます。

Favorite