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

2021.07.06.

CSS

X Facebook Pocket LINE はてブ

株式会社TREVOの月額制ホームページ制作サービス
PR

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

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

■css


html {
  scroll-behavior:smooth;
}

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

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

X Facebook Pocket LINE はてブ

関連の記事

お問い合わせ
CONTACT

ホームページ制作に関することなら
お気軽にご相談ください

お電話でのお問い合わせはこちら

0120-838-567

平日9:00~18:00まで 定休日:土 日 祝