株式会社オートプロジェクト

Columnコラム
  • TOP
  • コラム一覧
  • CSS1行だけで、スムーズスクロールが可能になる方法
2022年12月15日
CSS1行だけで、スムーズスクロールが可能になる方法

スムーズスクロールとは、サイトをタップするだけでアンカーを付けた箇所に画面が滑らかに移動する動きのことです。

今回は、JavaScriptを使用せず、スムーズスクロールをCSSだけで実装する方法を紹介します。


html{
 scroll-behavior: smooth;
}

このスムーズスクロールは、ランディングページのナビメニューを設定する際などに便利です。

注意:モーダルウィンドウなど、その他の設定がある場合は影響が出る可能性があるため、JavaScriptの使用をお奨めします。また、bodyタグには効かないため、必ずHTMLタグを指定してください。
Webデザイナー / コーダーのみなさまへ

株式会社オートプロジェクトでは、バックエンド全般を安心してお任せいただけます。

サーバー設定やDB管理、セキュリティ対策など幅広いニーズに対応いたします。お気軽にご相談ください。

>> バックエンドについて、オートプロジェクトに問い合わせをする