技術ブログ
ページの上へ戻る場合は、アンカーリンクで移動します。
その時に滑らかな動きでページ上部へ移動すことができるCSSを紹介します。
CSSのコードは、下記のコードをCSSに追加するだけです。
■css
html {
scroll-behavior:smooth;
}
これだけでスムーズスクロールが実現できます。
ただ、すべてのアンカーリンクに対応するので、一部異なるアクションをしたい場合はJavaScriptで実装するしかありませんが、細かい設定を必要としないのであれば非常に便利なコードです。
大阪のホームページ制作会社TREVOでは、ホームページ制作に関する情報を掲載しています。最短2日で仮サイトを公開するサービスやSEO対策に特化したホームページ制作、オリジナルホームページデザイン、ライティング、リスティング広告、WEBマーケティングなどのサービスをご紹介しています。
衣川知秀
経歴： 3DCG制作の専門学校を卒業後、デザイン会社に就職。デザイン会社では主にWEB制作を担当し、旅館の予約システムや商店街にWEBカメラを設置したプロモーション等を展開し、4年後に転職。 株式会社TREVOでデザイン、コーディング、ディレクション、システム開発を担当
