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

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

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

1. HTML 構造

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

<nav class="smooth-scroll-nav">
  <ul class="smooth-scroll-menu">
    <li><a href="#section1">Section 1</a></li>
    <li><a href="#section2">Section 2</a></li>
    <li><a href="#section3">Section 3</a></li>
    <li><a href="#section4">Section 4</a></li>
  </ul>
</nav>

<section id="section1">
  <h2>Section 1</h2>
  <p>This is the content of section 1.</p>
</section>

<section id="section2">
  <h2>Section 2</h2>
  <p>This is the content of section 2.</p>
</section>

<section id="section3">
  <h2>Section 3</h2>
  <p>This is the content of section 3.</p>
</section>

<section id="section4">
  <h2>Section 4</h2>
  <p>This is the content of section 4.</p>
</section>

上の例では、ナビゲーション メニューのコンテナとして <nav> 要素を作成し、その中に を追加しました。 <ul> 要素は、対応するメニュー項目が追加されたメニューのリストとして機能します。次に、<section> 要素を使用して各セクションのコンテンツを作成します。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 サイトの他の関連記事を参照してください。