現在のページの特定の部分をクリックした後に指定されたdivにジャンプするようにjsを実装するにはどうすればよいですか?

ウェブサイト構築の過程で、現在のページ上の特定の位置をマウスでクリックすると、現在のページ上の別の指定された位置に直接移動するような機能を実装する必要がある場合があります。実際、この関数は上級プログラマーにとっては確かに難しくありませんが、初心者にとっては、主にどこから始めればよいかわからないため、難しいものです。そこでこの記事では、jsでdiv位置を指定するページにジャンプする方法を2つ紹介します。

1. HTML アンカー ポイントによる実装:
クリックしてジャンプしたい場所が HTML アンカー ポイントである場合、つまり、A タグのハイパーリンクをクリックしてジャンプする場合、A タグの href 属性を直接指すことができます。ジャンプ仕様の位置の div のコード例は次のとおりです。

<a href="#abc">点击跳转</a>
<div id="abc">将要跳转到这里</div>

注: 上の A リンクをクリックすると、同じページ上の id="abc" の div までスクロールします。指定された位置の div は一意であるため、A タグはこの ID を直接指しています。ID の前に # 記号を追加することを忘れないでください。

2. ボタン ボタンをクリックして実現します。
クリックしてジャンプしたい場所がボタン ボタンの場合、ボタンは href を追加できないため、それを実現するには js ジャンプ コードを使用する必要があります。 :

<script>
    function onTopClick() {
         window.location.hash = "#abc";
       }
    </script>
    <input  type="button" name="Submit" value="提交"  onclick="javascript:onTopClick();" />
    <div id="abc">js跳转到页面指定div位置</div>

注: 上で述べたように、送信ボタンをクリックするとスクロールし、同じページ内の id="abc" の div にジャンプします。この js クリック ジャンプ ページ コードの原理は次のとおりです。ページの各要素には一意の ID が割り当てられ、送信ボタンをクリックすると js クリック イベントがトリガーされ、js はスクロールして ID (window.location.hash) を介して要素にジャンプします。 = "#abc" は、現在のページ id="abc" に位置する div を指します。

上記は div を使用してローカル ジャンプ ページを実装するための 2 つの簡単な方法であり、初心者でもこの記事の紹介を読めば関連する知識を簡単に習得できると思います。

以上が現在のページの特定の部分をクリックした後に指定されたdivにジャンプするようにjsを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。