CSS1行だけでスムーススクロールが実現【scroll-behavior】スクロールビヘイビア

scroll-behavior

scroll-behaviorプロパティを使えば、CSS1行だけでスムーススクロールが実現できる。

scroll-behavior: smooth;

scroll-behaviorプロパティの初期値はauto。
スムーススクロールにしたいばあい smooth を指定する。

/* 即時に遷移する（初期値） */
html {
	scroll-behavior: auto;
}

/* スムーススクロール ゆっくり遷移する */
html {
	scroll-behavior: smooth;
}

htmlタグに対して設定。

イージング（速度調整）ができない

scroll-behaviorプロパティではイージングを指定できない。
イージングを指定したい場合は、従来のようにJavaScriptを使う。

速度はブラウザ依存。