【1行でOK】ページ内リンクへスルスルスクロール移動させるCSS

ページ内リンクをクリックしたら、リンク先まで一瞬で移動ではなく、スルスルとスクロールして移動させたいのですが、どうしたら良いでしょうか？

今回、クライアント様よりこのようなご質問をいただいたので、ページ内リンクをクリックしたら、スルスルとスクロールして移動させるCSSについて記事にしてみました。

【コピペOK！】ページ内リンクへスルスルとスクロール移動させるCSS

CSSファイルに下記のように記載してください。

1html {
2	scroll-behavior: smooth;
3}

htmlセレクタに対して

scroll-behavior: smooth;

を足すだけで実装できます！

※htmlセレクタに対してのCSSを書いていない場合は、１～３行をまるっとコピペしてください。

えりー

とっても簡単ですね！

基本的には、古いブラウザは無視で良いと思います。そのうちアップデートされるので、最新のブラウザにあわせてコーディングすればOKです！

最後に：コーディング関連のご相談もお気軽にどうぞ！

今回は、ページ内リンクにスルスルとスクロールしながら移動させる「scroll-behavior: smooth;」についてご紹介しました！

えりー

以前はこんなに簡単に実装できませんでしたが、便利な時代になりました。。。

空創デザインオフィスでは、Webデザイナーを目指す方へのサポートやHTML・CSSなどのコーディング関連のご相談も承っております。下記よりお気軽にお問い合わせください！

えりー

Web・グラフィックデザイナー / ブロガー

2018年よりフリーランスWeb・グラフィックデザイナー 兼 ブロガーとして活動しています。
都内IT系企業にて研鑽を積んだ後、起業しました。
IT・デザイン業界歴は10年以上。
今までに関わらせていただいたクライアント様は300社以上となります。
ブログでは、自身の経験を元に、Web・グラフィックデザイン制作のことや、就職・転職のこと等の情報を発信しています。
少しでも読者の皆様のお役に立てれば幸いです！