jQuery を用いたページ内スクロール: リンク先 ID 値が日本語である場合、エラー "Syntax error, unrecognized expression" が発生

#jquery #scroll #hash #japanese

jQuery の animate を使用して、ページ内リンクに対するスムーズスクロールを実装しようとしていました。
使用していた jQuery のバージョンは 3.4.1 です。

リンク先の ID 属性値が日本語である場合、Error: Syntax error, unrecognized expression が発生しました。

コンソールのエラーログに URI エンコードされた文字列が出力されていたので、そちらをデコードすると、成功するようになりました:

- $(this.hash);
+ $(decodeURI(this.hash));

スクロール処理の全体は以下の通りです:

// href 属性値が # 始まりの a タグに対して click のイベントハンドラを追加する
$('a[href^="#"]').on('click', function(event) {
    event.preventDefault();

    // ハッシュ値を取得して URI デコードする
    var decodedHash = decodeURI(this.hash);
    // スクロール位置を取得する
    var offset = $(decodedHash).offset();
    var offsetTop = offset ? offset.top: 0;
    // スクロールを実行する
    $('html, body').animate({
        scrollTop: offsetTop,
    }, 700, function(){
        // ページ位置を更新する
        window.location.hash = decodedHash;
    });
});