loading...

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

nabbisen profile image Heddi Nabbisen ・1 min read

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;
    });
});

Posted on Sep 26 '19 by:

nabbisen profile

Heddi Nabbisen

@nabbisen

An ICT designer/developer and a security monk. "With a cool brain and a warm heart", I am challenging unsolved problems in our society. I use OpenBSD/Rust/etc.

Discussion

markdown guide
 
 

いえいえ 😊
コメントありがとうございます。