CSSだけでスムーススクロール

CSS2019.12.23

scroll-behaviorプロパティ

ページ内リンクによる移動が発生した際の挙動を指定できるプロパティ
値はsmoothとautoがある

一番簡単な使い方はhtmlタグに対して設定してしまう使い方

/*スムーススクロールさせたいとき*/
html{
  scroll-behavior: smooth;
}
/*スムーススクロールさせないデフォルトの動き*/
html{
  scroll-behavior: auto;
}

1

2

3

4

5

6

7

8

/*スムーススクロールさせたいとき*/

html{

scroll-behavior: smooth;

}

/*スムーススクロールさせないデフォルトの動き*/

html{

scroll-behavior: auto;

}

まだ草案らしいのでブラウザの対応状況がひどいでも、ワクワクする

POPULAR