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

CSS1行だけで、スムーズスクロールが可能になる方法

CSS1行だけで、スムーズスクロールが可能になる方法

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

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


html{
 scroll-behavior: smooth;
}

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

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

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

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

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

Contact ご相談・お問い合わせ

実現の可否や概算費用、納期に関するご質問・ご相談も、
どうぞご遠慮なくお問い合わせください。

お問い合わせ ご相談・お問い合わせ
TOP