ボタンのクリック時に jQuery アニメーションを使用して特定の要素までスムーズにスクロールする方法

ボタンのクリック時に特定の要素までスクロールするアニメーション化

ページ上の特定の位置、div、またはターゲットにジャンプまたはスクロールするには、ボタンがクリックされると、jQuery のアニメーション機能を使用できます。

HTML 構造:

JavaScript で参照するための ID またはクラスを持つボタン要素を作成します。また、ターゲット要素にスクロール先の ID を設定します。

JavaScript:

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

このスクリプトでは、#clickMe ボタンがクリックされたときに、これにより、html 要素と body 要素のアニメーションがトリガーされ、#targetElement の上部オフセットまでスクロールします。 600 パラメータは、アニメーションの継続時間をミリ秒単位で設定します。

例:

次の HTML 構造を考えてみましょう:

<code class="html"><a id="clickMe" href="#">Go to Div</a>

<div id="targetElement">Target Div</div></code>

対応する JavaScript :

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

「Go to Div」ボタンをクリックすると、ページは「Target Div」要素までスムーズにスクロールします。

以上がボタンのクリック時に jQuery アニメーションを使用して特定の要素までスムーズにスクロールする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。