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