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; }); }); 
Top comments (2)
ありがとう
いえいえ 😊
コメントありがとうございます。