CSSでスムーズスクロールを実装する方法

2021.07.06.

ページの上へ戻る場合は、アンカーリンクで移動します。
その時に滑らかな動きでページ上部へ移動すことができるCSSを紹介します。

CSSのコードは、下記のコードをCSSに追加するだけです。

■css


html {
  scroll-behavior:smooth;
}

これだけでスムーズスクロールが実現できます。
ただ、すべてのアンカーリンクに対応するので、一部異なるアクションをしたい場合はJavaScriptで実装するしかありませんが、細かい設定を必要としないのであれば非常に便利なコードです。

経歴： 3DCG制作の専門学校を卒業後、デザイン会社に就職。デザイン会社では主にWEB制作を担当し、旅館の予約システムや商店街にWEBカメラを設置したプロモーション等を展開し、4年後に転職。株式会社TREVOでデザイン、コーディング、ディレクション、システム開発を担当

関連の記事