今さら調べるスムーススクロール - Qiita

はじめに スムーススクロールの実装は未だに悩みます。 ほぼ必須で行う実装ではあるものの、毎回下記のような課題がちらつきます。 パフォーマンスは落としたくない スクロール後にフォーカスも移動させたい（アクセシビリティ対応） ページ内検索ではアニメーションさせたくない（ユーザビリティ向上） 「視差効果を減らす」がオンのときはアニメーションさせたくない イージングが気持ちよかったらよりよい 実装は簡単なほうがいい 実装もややこしいし、検証も大変だし、自分なりの慣例が欲しくなったので調べました。 先に結論：今のところよさげな方法 「 html 要素に scroll-behavior: smooth; + リンク先に tabindex="-1” をつける」 2023年12月時点で、個人的にはこの方法が好みでした。 実装はかなりシンプル。 See the Pen Untitled by 伏屋楓 (@e

[Lhankor_Mhy]

scroll-behavior: smooth と :focus-within の話