Comment obtenir un positionnement rapide sur la page avec JS (problème de saut d'ancre)

Cet article présente principalement comment JS peut obtenir un positionnement rapide sur la page (problème de saut d'ancre). Il a certaines références et valeurs pour l'apprentissage de js. Les amis intéressés par JS peuvent se référer à cet article

1. Introduction au saut de point d'ancrage

Le point d'ancrage est en fait un point qui permet de positionner la page à un certain endroit. Souvent vu sur des pages plus grandes.

Les sauts d'ancrage se présentent sous deux formes :

• un tag + nom/href attributs

• Utilisez l'attribut id de la balise

Avant HTML 4.0, les identifiants de fragment ne pouvaient être créés qu'à l'aide de l'attribut name de la balise La présence de l'attribut id permet à tous les éléments HTML ou XHTML d'être des identifiants de fragment. En effet, l'identifiant id peut être utilisé dans presque toutes les balises. La balise conserve l'attribut name pour des raisons de compatibilité avec les versions précédentes, mais peut également utiliser l'attribut id. Ces attributs peuvent être utilisés de manière interchangeable et l'attribut id peut être considéré comme une version améliorée de l'attribut name. Les attributs name et id peuvent être utilisés conjointement avec l'attribut href, de sorte qu'une balise puisse être utilisée à la fois comme lien hypertexte et comme identifiant de fragment.

<a href="#he" rel="external nofollow" rel="external nofollow" >波轮洗衣机介绍</a>
<a href="#f" rel="external nofollow" ></a>

Cependant, cette méthode utilise une balise vide, et parfois le point d'ancrage échoue. Par conséquent, il est recommandé d'utiliser id pour lier le point d'ancrage. Le code est le suivant :

<a href="#he" rel="external nofollow" rel="external nofollow" >波轮洗衣机介绍</a><h2 id="#de">波轮洗衣机介绍</h2>

2. Adresse URL contenant le saut d'ancrage

<🎜. >window.location .hash

【1】À propos de #

Dans la production de pages, le symbole « # » est très courant et universel. Fondamentalement, cela signifie le sélecteur d'identifiant. De même, dans l'URL de la page, # peut également être compris comme le sélecteur d'identifiant, c'est-à-dire que la page accède à la balise id contenant l'URL pointée.

Il y a un '#' à la fin de cette adresse, ce qui équivaut à dire au navigateur de sauter. Le 3 suivi de # signifie qu'il sera redirigé vers http://www. php.cn/view Dans la page /121416.htm?p=1, recherchez les balises qui répondent aux caractéristiques du #3 et exécutez le saut.

【2】À propos des points d'ancrage vides pointant vers

Si l'identifiant du caractère suivant # dans l'URL est introuvable dans le texte, il y aura deux situations : Si C'est sur la page actuelle, à l'exception du changement de l'adresse URL, rien d'autre ne changera et la page ne sautera pas depuis d'autres pages, la page sera affichée en haut et '#' est essentiellement. une décoration.

【3】window.location.hash

3. Saut en douceur du point d'ancrage sous Jquery.

Si vous laissez la page défiler en douceur jusqu'à un élément avec l'identifiant de box, le code JQuery n'a besoin que d'une seule phrase, et les positions clés sont les suivantes :

$('html, body').animate({scrollTop: $('#box').offset().top}, 1000)

Implémentation native JS. La méthode

scrollTo() peut faire défiler le contenu jusqu'aux coordonnées spécifiées.

scrollTo(xpos,ypos);

4. Échec de l'actualisation du point d'ancrage sous IE et solution sous JQuery

[1] À propos de l'échec de l'actualisation du point d'ancrage

L'échec de l'actualisation du point d'ancrage signifie que lorsque la touche d'actualisation F5 est enfoncée, même si l'URL est suivie d'un point d'ancrage, ce point d'ancrage ne fonctionnera pas.

【2】En Jquery, ce n'est pas difficile à mettre en œuvre. Vous pouvez obtenir le point d'ancrage en fonction de l'URL, obtenant ainsi le point d'ancrage correspondant

objet , puis laisser la hauteur de défilement de la page être sa valeur de décalage par rapport au haut de la page

. Cela fait fonctionner les points d'ancrage derrière celui-ci, que la page soit rechargée ou actualisée.

$(function() {
  var url = window.location.toString();
  var id = url.split('#')[1];
  if (id) {
    var t = $('#' + id).offset().top;
    $(window).scrollTop(t);
  }
})

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun ! !

Recommandations associées :

Explication de Require appelle js en JavaScript

Analyse du mécanisme de conversion implicite du double signe égal en Javascript

Définition et utilisation de la liste doublement chaînée JavaScript

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!