純粋な CSS を使用して Web ページにスムーズにスクロールするナビゲーションメニューを実装する方法-CSSチュートリアル-php.cn

純粋な CSS を使用して Web ページにスムーズにスクロールするナビゲーションメニューを実装する方法

純粋な CSS を使用して Web ページにスムーズなスクロールナビゲーションメニューを実装する方法

ユーザーが Web ページ内を移動できるようにガイドすることは重要なデザイン要素であり、スムーズなスクロールナビゲーションメニューはスクロールナビゲーションメニューが提供されており、ユーザーフレンドリーなナビゲーションエクスペリエンスを作成できます。この記事では、純粋な CSS を使用してこのようなナビゲーションメニューを実装する方法を紹介し、対応するコード例を示します。

1. HTML 構造

まず、HTML でナビゲーションメニューの基本構造を作成する必要があります。簡単な例を次に示します:

  Section 1
 Section 2
 Section 3
 Section 4
 
 
  Section 1
 This is the content of section 1.
 
  Section 2
 This is the content of section 2.
 
  Section 3
 This is the content of section 3.
 
  Section 4
 This is the content of section 4.

ログイン後にコピー

上の例では、ナビゲーションメニューのコンテナとして

要素を作成し、その中にを追加しました。

要素を使用して各セクションのコンテンツを作成します。id属性は、メニュー項目のhref属性に対応します。

2. CSS スタイル

次に、CSS を使用してスムーズなスクロール効果を作成します。まず、ナビゲーションメニューにいくつかの基本スタイルを適用する必要があります。

.smooth-scroll-nav { position: fixed; top: 0; left: 0; width: 100%; background-color: #333; padding: 10px 0; } .smooth-scroll-menu { list-style: none; margin: 0; padding: 0; text-align: center; } .smooth-scroll-menu li { display: inline-block; margin-right: 15px; } .smooth-scroll-menu li:last-child { margin-right: 0; } .smooth-scroll-menu a { color: #fff; text-decoration: none; padding: 5px 10px; } .smooth-scroll-menu a:hover { background-color: #fff; color: #333; }

ログイン後にコピー

上記のコードでは、position:fixed;属性をナビゲーションメニューコンテナに追加して固定にしました。ページの上部。次に、対応する背景色、パディング、フォント色、その他のスタイルを設定します。次に、inline-blockレイアウトを使用してメニュー項目を水平に表示し、間隔とホバー効果を追加します。

次に、スムーズなスクロール効果を追加します。この効果を実現するには、CSS のscroll-behaviorプロパティを使用します。場合によっては、ブラウザーがこの属性をサポートしていない可能性があるため、これをサポートしていないブラウザー用のフォールバックソリューションも提供する必要があります。

html { scroll-behavior: smooth; } @media screen and (-webkit-min-device-pixel-ratio:0) { /* 回退方案：使用jQuery滚动动画 */ .smooth-scroll-nav a { transition: all 0.3s ease-in-out; } .smooth-scroll-nav a[href^="#"] { position: relative; } .smooth-scroll-nav a[href^="#"]:after { content: ""; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background-color: #fff; transition: all 0.3s ease-in-out; transform: translateX(-50%); } .smooth-scroll-nav a[href^="#"]:hover:after, .smooth-scroll-nav a[href^="#"]:focus:after { width: 100%; } }

ログイン後にコピー

上記のコードでは、まずscroll-behavior:smooth;を使用してスムーズスクロール効果を適用します。次に、@mediaクエリを使用して、scroll-behavior属性をサポートしないブラウザにフォールバックを提供します。

フォールバックソリューションでは、メニュー項目にトランジション効果を追加して、マウスをホバーしたときに下線効果が表示されるようにします。::after疑似要素を使用してこの下線を作成し、トランジション効果を使用してアニメーション化します。対応するtransition属性を通じて、下線の拡大と縮小を実現します。

3. JavaScript の追加機能

scroll-behavior属性をサポートしていないブラウザでスムーズなスクロールを実現したい場合は、JavaScript を使用して実現することもできます。。以下は、jQuery ライブラリを使用したサンプルコードです。

$(function() { $('a[href^="#"]').on('click', function(e) { e.preventDefault(); var target = $(this.getAttribute('href')); if (target.length) { $('html, body').stop().animate({ scrollTop: target.offset().top }, 1000); } }); });

ログイン後にコピー

上記のコードでは、jQuery のanimate関数を使用して、スムーズなスクロール効果を実現します。メニュー項目がクリックされると、まずデフォルトのジャンプ動作を防止し、次にoffset()関数を使用してターゲット要素の位置を取得し、animate## を介してページをスクロールするように実装します。＃関数。

これで、純粋な CSS に基づいたスムーズなスクロールナビゲーションメニューの実装が完了しました。この方法を使用すると、Web ページにスムーズなナビゲーションエクスペリエンスを提供し、CSS スタイルを通じてメニュー全体の外観と動作を制御できます。

以上が純粋な CSS を使用して Web ページにスムーズにスクロールするナビゲーションメニューを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。