jQuery を使用して Web サイト上の特定の要素へのスムーズなスクロールを作成するにはどうすればよいですか?

ボタンのクリックから特定のターゲットにジャンプまたはスクロール

ユーザーがボタンをクリックして Web ページ上を垂直方向に移動できるようにしたいと考えています。特定の ID を持つ指定された div または要素へのジャンプまたはスクロールをトリガーします。このために、jQuery を使用して、目的の機能を簡単に実現できます。

1 つの方法は、ボタンに似たリンクに CSS スタイルを割り当てることです。このアプローチにより、非 JavaScript 環境のフォールバック メカニズムが保証され、アニメーションなしの標準的なジャンプが可能になります。

jQuery のアニメーション機能を使用した最適化された例を次に示します。

<code class="javascript">$(document).ready(function() {
  $(".jumper").on("click", function( e ) {
    e.preventDefault();
    $("body, html").animate({ 
      scrollTop: $( $(this).attr('href') ).offset().top 
    }, 600);
  });
});</code>

HTML 構造内で、次のことができます。ページ上の特定の要素にリンクするクラス「ジャンパー」のリンクを定義します。例:

<code class="html"><a class="jumper" href="#element-1">Element 1</a></code>

ユーザーがこのリンクをクリックすると、提供された jQuery コードによって ID「element-1」の要素へのアニメーション スクロールが開始され、スムーズで視覚的に魅力的なナビゲーション エクスペリエンスが提供されます。

以上がjQuery を使用して Web サイト上の特定の要素へのスムーズなスクロールを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。