HTML内の指定した場所にジャンプする方法

HTML 内の指定された場所にジャンプする方法: 1. コンテナの ID を下部に設定し、a タグの href で # id を使用してジャンプを実現します。2. window.scrollTo を使用します。メソッドの構文は「window.scrollTo({top,left,behavior})」です。

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

ページに表示される情報は常に限られているため、ページ上の指定された場所の実装にジャンプできる必要があります

純粋な HTML 実装

• ジャンプ 回転時間: b080426733c89407a25a10de72aa5ac4クリックするとアンカー名という名前の場所にジャンプします5db79b134e9f6b82c0b36e0489ee08ed

• 埋もれたアンカー ポイント: b993417aec2d49b264546ed4c72afd3eタグのアンカー ポイント5db79b134e9f6b82c0b36e0489ee08ed, 95c52d768b99697aaa329aa31a992079id でマークされたアンカー ポイント94b3e26ee717c64999d7867364b1b4a3

• 分析: a タグをクリックするとアンカーポイントにジャンプします。バッファリング効果はなく、エクスペリエンスは平均的で、URL に「#anchorName」が追加されます。これはルーティング設定に影響を与えるため、SPA アプリケーションでは受け入れられません。ページを更新しても効果はありません。

JavaScript 補助 (window.scrollTo メソッド)

• window.scrollTo({ top, left ,behavior})、それぞれ数値、数値、弦。ドキュメントの上部と左からジャンプする距離とジャンプ効果 (スムーズ、即時) を指定します

• #ジャンプ タイミング: イベント リスニングを追加

# 要素からドキュメントの先頭までの距離を取得します (offsetTop 属性)。offsetTop は、offsetParent 要素の先頭を基準とした現在の要素の距離を返すため、ループ内でそれを累積して取得する必要があります。文書の先頭からの距離

• function heightToTop(ele){
      //ele为指定跳转到该位置的DOM节点
      let bridge = ele;
      let root = document.body;
      let height = 0;
      do{
          height += bridge.offsetTop;
          bridge = bridge.offsetParent;
      }while(bridge !== root)
   
      return height;
  }
  //按钮点击时
  someBtn.addEventListener('click',function(){
      window.scrollTo({
          top:heightToTop(targetEle),
          behavior:'smooth'
      })
  })

2 行の方法を比較すると、2 番目の方法の方が明らかに優れています。

推奨される学習:

html ビデオ チュートリアル

以上がHTML内の指定した場所にジャンプする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。