大阪のホームページ制作会社 株式会社TREVO
技術ブログ

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

2021.07.06.

CSS

twitter Facebook Pocket LINE はてブ

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

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

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

■css


html {
  scroll-behavior:smooth;
}

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

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

大阪のホームページ制作会社TREVOでは、ホームページ制作に関する情報を掲載しています。最短2日で仮サイトを公開するサービスやSEO対策に特化したホームページ制作、オリジナルホームページデザイン、ライティング、リスティング広告、WEBマーケティングなどのサービスをご紹介しています。

twitter Facebook Pocket LINE はてブ
お見積もり