Open2023/02/15にコメント追加2

scroll-behavior:smooth と ScrollIntoView 関連

仕様のドキュメント

Issue

アンカーリンクで#指定の該当箇所に飛ぶ挙動が scroll-behavior: smooth; を付与するとChromeだけ飛ばなくなる。シンプルに該当CSSだけ付与したケースでは起こらないが、恐らく scrollIntoView などをJS等でコントロールしている場合に起こる。

恐らく関連するChromiumバグ

対策

全体に付与すると起こるので、以下の様に一部に限定すると多分回避できる

window.addEventListener('load', () => {
  let links = document.querySelectorAll('a[href^="#"]');
  for (const link of links) {
    link.addEventListener('click', (e) => {
      e.preventDefault();
      const href = link.getAttribute('href');
      document.querySelector(href).scrollIntoView({
        behavior: 'smooth',
      });
    });
  }
});

参考

mimi

視差効果オフにしている人向けに対策する方法

https://web.dev/prefers-reduced-motion/