DEV Community

nabbisen
nabbisen

Posted on

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

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

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

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

- $(this.hash); + $(decodeURI(this.hash)); 
Enter fullscreen mode Exit fullscreen mode

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

// 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; }); }); 
Enter fullscreen mode Exit fullscreen mode

Top comments (2)

Collapse
 
zyzmoz profile image
Daniel Cunha (he/him)

ありがとう

Collapse
 
nabbisen profile image
nabbisen

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