Comment accéder à un emplacement spécifié en HTML

Comment sauter vers un emplacement spécifié en HTML : 1. Définissez l'identifiant du conteneur en bas et utilisez #+id dans le href de la balise a pour réaliser le saut ; Méthode scrollTo, syntaxe "window.scrollTo({top,left,behavior})".

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

Étant donné que les informations affichées sur la page sont toujours limitées, nous devons pouvoir accéder à l'emplacement spécifié sur la page

Implémentation HTML pure

• .

  Temps de tournage du saut : Cliquez pour accéder à l'emplacement nommé AnchorName

• Point d'ancrage enterré :

• Auxiliaire JavaScript (méthode window.scrollTo)

window.scrollTo({top, left,behavior}), respectivement nombres, nombres, chaîne. Spécifiez la distance à laquelle sauter depuis le haut et la gauche du document, ainsi que l'effet de saut (fluide, instantané)

• Minutage du saut : ajouter un écouteur d'événement

• Obtenir la distance entre l'élément et le haut du document (attribut offsetTop). offsetTop renvoie la distance de l'élément actuel par rapport au haut de son élément offsetParent, nous devons donc l'accumuler dans une boucle pour obtenir le distance du haut du document

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

  En comparant la méthode sur deux lignes, la deuxième méthode est évidemment meilleure.

Apprentissage recommandé :

Tutoriel vidéo html

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!