jQuery を使用して、特定の入力をクリックした後にページの最後の要素までスムーズにスクロールするにはどうすればよいですか?

jQuery を使用した要素へのスクロール

入力フィールドなどのさまざまな要素を含む Web ページのコンテキストでは、 、および をクリックすると、ページを最後の項目にスムーズに移動するスクロール メカニズムを実装することを目指しています。 ID "#subject" で識別される特定の入力要素。

これを実現するには、jQuery ライブラリのアニメーション機能を利用します。次のコード スニペットは、目的の動作を示しています。

$("#subject").click(function() {
    $([document.documentElement, document.body]).animate({
        scrollTop: $("#submit").offset().top
    }, 2000);
});

説明:

1. ID「#subject」の入力をクリックすると、アニメーション関数がトリガーされます。
2. この関数は、$([document.documentElement, document.body]) セレクターを使用して HTML 要素と body 要素をターゲットにし、互換性を確保します。
3. これらの要素のscrollTopプロパティは、ID「#submit」を持つ送信ボタンの「offset().top」プロパティに到達するようにアニメーション化されます。
4. オフセット( ).top プロパティは、ページの上部から送信ボタンまでの距離を返し、その位置まで事実上スクロールします。
5. アニメーションは 2000 ミリ秒続くように設定されています。 (2 秒)、スムーズな移行が作成されます。

注: 提供されたコードでは、ID が「#submit」の送信ボタンがページの最後の項目であると想定しています。そうでない場合は、目的の要素をターゲットにするようにコードを調整できます。

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