JavaScript を使用して HTML ページ上の特定のアンカーまでスクロールするにはどうすればよいですか?

HTML ページ上の特定のアンカーまでスクロールする

JavaScript は、HTML ページを特定のアンカーまでスクロールする便利な方法を提供します。ドキュメント内のシームレスなナビゲーション。

問題:

ボタンがクリックされたとき、または特定のイベントが発生したときに、ブラウザのページを特定のアンカーまでスクロールしたいと考えています。ターゲット アンカーには、name 属性または id 属性を指定できます。

回答:

次の JavaScript 関数を使用すると、この機能を実現できます:

function scrollTo(hash) {
    location.hash = "#" + hash;
}

実装:

この関数を使用するには、アンカーの名前または ID をパラメーターとして指定して呼び出すだけです。たとえば、「myAnchor」という ID を持つアンカーがある場合、次のように関数を呼び出します。

scrollTo("myAnchor");

この手法は、location.hash プロパティが次のときに自動的に更新されるという事実を利用します。ブラウザはアンカーまでスクロールします。 location.hash を目的のアンカーに設定すると、ブラウザが強制的にその場所までスクロールします。

注:

外部ライブラリ (jQuery など) はありません。この機能を実装するには必要です。すべての主要なブラウザでネイティブに動作します。

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