So springen Sie zu einer bestimmten Stelle in HTML

So springen Sie in HTML zur angegebenen Position: 1. Legen Sie unten die ID des Containers fest und verwenden Sie #+id im href des a-Tags, um den Sprung zu erreichen Syntax „window.scrollTo ({top,left,behavior})“.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Da die auf der Seite angezeigten Informationen immer begrenzt sind, müssen wir in der Lage sein, zur angegebenen Stelle auf der Seite zu springen.

Reine HTML-Implementierung

• Sprungzeitpunkt: 74ee42ae66092e47cf7e8b0fdfdf34ce

• Analyse: Wenn Sie auf das Tag a klicken, springt es zum Ankerpunkt, es gibt keinen Puffereffekt, die Erfahrung ist durchschnittlich und „#anchorName“ schon zur URL hinzugefügt werden. Dies ist in SPA-Anwendungen nicht akzeptabel, da es sich auf die Routing-Konfiguration auswirkt. Das Aktualisieren der Seite hat keine Auswirkung.

• JavaScript-Hilfsmittel (window.scrollTo-Methode)

window.scrollTo({ top, left ,behavior}), bei dem es sich jeweils um Zahlen, Zahlen und Zeichenfolgen handelt. Geben Sie den Abstand an, zu dem vom oberen und linken Rand des Dokuments gesprungen werden soll, und den Sprungeffekt (sanft, sofort). (offsetTop-Attribut), offsetTop gibt den Abstand des aktuellen Elements relativ zum oberen Rand seines offsetParent-Elements zurück. Daher müssen wir ihn durch eine Schleife akkumulieren, um den Abstand vom oberen Rand des Dokuments zu erhalten

• 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'
      })
  })

  Vergleich der beiden Zeilen Von den Methoden ist die zweite offensichtlich besser.

Empfohlenes Lernen:
• HTML-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo springen Sie zu einer bestimmten Stelle in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!