現役Webデザイナーオススメのソースコードエディタ(無料)
kanri
空創デザインオフィス
ページ内リンクをクリックしたら、リンク先まで一瞬で移動ではなく、スルスルとスクロールして移動させたいのですが、どうしたら良いでしょうか?
今回、クライアント様よりこのようなご質問をいただいたので、ページ内リンクをクリックしたら、スルスルとスクロールして移動させるCSSについて記事にしてみました。
CSSファイルに下記のように記載してください。
1html {
2 scroll-behavior: smooth;
3}
htmlセレクタに対して
scroll-behavior: smooth;
を足すだけで実装できます!
※htmlセレクタに対してのCSSを書いていない場合は、1~3行をまるっとコピペしてください。
とっても簡単ですね!
基本的には、古いブラウザは無視で良いと思います。そのうちアップデートされるので、最新のブラウザにあわせてコーディングすればOKです!
今回は、ページ内リンクにスルスルとスクロールしながら移動させる「scroll-behavior: smooth;」についてご紹介しました!
以前はこんなに簡単に実装できませんでしたが、便利な時代になりました。。。
空創デザインオフィスでは、Webデザイナーを目指す方へのサポートやHTML・CSSなどのコーディング関連のご相談も承っております。下記よりお気軽にお問い合わせください!