scrollBehavior スタイリング属性

定義と使用方法

scrollBehavior 属性は、ユーザーがスクロール可能なボックス内のリンクをクリックしたときに、直接ジャンプするのではなく、スムーズなアニメーションで位置にスクロールするかどうかを定義します。

参照してください：

CSS 参考マニュアル：scroll-behavior 属性

例

ページにスムーズなスクロール効果を追加する：

document.documentElement.style.scrollBehavior = "smooth";

自分で試してみてください

文法

object.style.scrollBehavior = "auto|smooth|initial|inherit"

属性値

値 説明
auto デフォルトです。スクロールボックス内の要素間で直接ジャンプする「スクロール効果」を許可します。
smooth スクロールボックス内の要素間でスムーズなアニメーションを許可する「スクロール効果」です。
initial この属性をデフォルト値に設定します。参照してください initial。
inherit この属性は親要素から継承されます。参照してください inherit。

ブラウザのサポート

このテーブルの数字は、この属性を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
61.0 79.0 36.0 14.0 48.0