CSS - scroll-behavior
概要
| 属性名 | scroll-behavior |
|---|---|
| 値 | auto | smooth |
| 初期値 | auto |
| 適用可能要素 | スクロールボックス |
| 継承 | しない |
| サポート | https://caniuse.com/?search=scroll-behavior |
説明
リンクをクリックしてジャンプする際にスクロールが発生する場合、スムースなアニメーションスクロールでジャンプします。
| 値 | 説明 |
|---|---|
| auto | 通常通りのスクロールを行います。 |
| smooth | スムーススクロールを行います。 |
使用例
このサイトもすべてのページに smooth を指定しています。例えば CSS入門 のページを開いて目次をクリックしてみてください。リンク先に移動する際にスムーススクロールが行われます。
CSS
html {
scroll-behavior: smooth;
}
リンク
- https://developer.mozilla.org/ja/docs/Web/CSS/scroll-behavior
- https://drafts.csswg.org/css-overflow/#smooth-scrolling
Copyright (C) 2022 杜甫々
初版：2022年8月14日、最終更新：2022年8月14日
https://www.tohoho-web.com/css/prop/scroll-behavior.htm