jQueryを使用してページクリックで特定の位置にジャンプまたはスクロールするにはどうすればよいですか?

ページ上の特定の位置にジャンプまたはスクロール クリック

Web 開発では、特定の div にジャンプまたはスクロールする必要がある場合があります。またはボタンがクリックされたときのページ上のターゲット。これは、フロントエンド開発を簡素化するための一般的な JavaScript ライブラリである jQuery を使用して実現できます。

特定の位置、div、またはターゲットにスクロールまたはジャンプするには、jQuery の animate() メソッドを使用できます。このメソッドを使用すると、ターゲット位置を引数として指定することでスクロール位置をアニメーション化できます。

この機能を実現する方法は次のとおりです:

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

この例では:

• $('#clickMe') は、クリックするボタンを選択します。
• ('html, body') は、ブラウザ間の互換性を確保するためにページ全体 (HTML 要素と body 要素の両方) をスクロールします。 .
• $('#target').offset().top は、ドキュメントを基準としたターゲット要素 (#target) の垂直位置を取得します。
• - 100 はオプションのオフセットです。ターゲット要素のすぐ上までスクロールして、ヘッドルームを与えます。
• 600 は、ミリ秒単位のアニメーションの長さです。

このスクリプトは、ボタンをクリックしたときに、 ID「clickMe」の場合、ページはスムーズにスクロールするか、ID「target」の要素にジャンプします。

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