jQuery を使用して、ボタンのクリックで Web ページ上の特定のセクションまたはターゲットにスムーズにスクロールするにはどうすればよいですか?

jQuery: ボタンのクリックを使用して特定の位置またはターゲットにジャンプします

Web ページをナビゲートするとき、多くの場合、すぐに次の場所にジャンプすることが望ましいです。特定のセクションまたはターゲット。 jQuery を使用すると、このタスクは簡単になります。

これを実現するには、click() イベント ハンドラーを利用してボタンのクリックをリッスンします。イベント ハンドラー内で、jQuery の animate() メソッドを使用して、目的のターゲットまでスムーズにスクロールします。詳細な内訳は次のとおりです:

HTML マークアップ:

<code class="html"><button id="clickMe">Jump to Section</button>

<!-- Targets for scrolling -->
<div id="target1">Section 1</div>
<div id="target2">Section 2</div></code>

JavaScript コード:

<code class="javascript">$('#clickMe').click(function() {
  $("body, html").animate({
    scrollTop: $('#target1').offset().top
  }, 600);
});</code>

このコード内:

• $('#clickMe') を使用してボタンを選択します。
• クリックされると、animate() を使用してスクロール アニメーションを開始します。
• ターゲット要素は、その ID (#target1) によって識別されます。
• offset() .top プロパティは、ページの上部からターゲット要素の垂直方向のオフセットを返します。
• 600 パラメーターは、アニメーションの継続時間 (ミリ秒単位) (オプション)。

このコードを利用すると、ボタンをクリックすると、「target1」div までシームレスにスクロールします。必要に応じて、ターゲット ID を変更して、ページ上の別のセクションまたはターゲットにジャンプできます。

以上がjQuery を使用して、ボタンのクリックで Web ページ上の特定のセクションまたはターゲットにスムーズにスクロールするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。