So erreichen Sie mit JS eine schnelle Positionierung auf der Seite (Ankersprungproblem)

Dieser Artikel stellt hauptsächlich vor, wie JS eine schnelle Positionierung auf der Seite erreichen kann (Ankersprungproblem). Freunde, die sich für JS interessieren, können auf diesen Artikel verweisen

1. Einführung in den Ankerpunktsprung

Ankerpunkt ist eigentlich ein Punkt, der die Positionierung der Seite an einer bestimmten Stelle ermöglicht. Oft auf größeren Seiten zu sehen.

Ankersprünge gibt es in zwei Formen:

• ein Tag + Name/href Attribute

• Verwenden Sie das id-Attribut des Tags

Vor HTML 4.0 konnten Fragment-IDs nur mit dem name-Attribut des 3499910bf9dac5ae3c52d5ede7383485-Tags erstellt werden. Durch das Vorhandensein des id-Attributs können alle HTML- oder XHTML-Elemente Fragmentbezeichner sein. Dies liegt daran, dass die ID-Kennung in fast allen Tags verwendet werden kann. Das 3499910bf9dac5ae3c52d5ede7383485-Tag behält das Namensattribut aus Kompatibilitätsgründen mit früheren Versionen bei, kann aber auch das ID-Attribut verwenden. Diese Attribute können austauschbar verwendet werden, und das ID-Attribut kann als aktualisierte Version des Namensattributs betrachtet werden. Sowohl das Name- als auch das ID-Attribut können in Verbindung mit dem href-Attribut verwendet werden, sodass ein 3499910bf9dac5ae3c52d5ede7383485-Tag sowohl als Hyperlink als auch als Fragment-ID verwendet werden kann.

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

Diese Methode verwendet jedoch ein leeres Tag und manchmal schlägt der Ankerpunkt fehl. Daher wird empfohlen, die ID zum Binden des Ankerpunkts zu verwenden. Der Code lautet wie folgt:

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

2. URL-Adresse mit Ankersprung

window.location .hash

【1】Über #

Bei der Erstellung von Seiten ist das Symbol „#“ sehr verbreitet und universell. Im Grunde bedeutet es den ID-Selektor. In ähnlicher Weise kann # in der URL der Seite auch als ID-Selektor verstanden werden, dh die Seite springt zum ID-Tag, das die URL enthält, auf die verwiesen wird.

Am Ende dieser Adresse befindet sich ein „#“, was der Anweisung an den Browser entspricht, zu springen. Die 3 gefolgt von # bedeutet, dass sie zu http://www umgeleitet wird. php.cn/view Suchen Sie auf der Seite /121416.htm?p=1 nach Tags, die die Merkmale von #3 erfüllen, und führen Sie den Sprung aus.

【2】Über leere Ankerpunkte, die auf

zeigen. Wenn die Zeichen-ID nach # in der URL nicht im Text gefunden werden kann, gibt es zwei Situationen: Wenn Abgesehen von der Änderung der URL-Adresse ändert sich nichts und die Seite springt nicht. Wenn Sie von einer anderen Seite springen, wird die Seite oben angezeigt eine Dekoration.

【3】window.location.hash

3. Reibungsloser Sprung des Ankerpunkts unter Jquery.

Wenn Sie die Seite reibungslos zu einem Element mit der Box-ID scrollen lassen, benötigt der JQuery-Code nur einen Satz und die Schlüsselpositionen lauten wie folgt:

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

Native JS-Implementierung. Die

scrollTo()-Methode kann den Inhalt zu den angegebenen Koordinaten scrollen.

scrollTo(xpos,ypos);

4. Ankerpunktaktualisierungsfehler unter IE und Lösung unter JQuery

[1] Über Ankerpunktaktualisierungsfehler

Fehler bei der Ankerpunktaktualisierung bedeutet, dass dieser Ankerpunkt nicht funktioniert, wenn die Aktualisierungstaste F5 gedrückt wird, auch wenn auf die URL ein Ankerpunkt folgt.

【2】In Jquery ist die Implementierung nicht schwierig. Sie können den Ankerpunkt entsprechend der URL abrufen und so das entsprechende Ankerpunkt--Objekt erhalten und dann die Bildlaufhöhe der Seite als Versatzwert vom oberen Rand der Seite festlegen

. Dadurch funktionieren die dahinter liegenden Ankerpunkte unabhängig davon, ob die Seite neu geladen oder aktualisiert wird.

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

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein! !

Verwandte Empfehlungen:

Erklärung zum Aufruf von js in JavaScript erforderlich

Analyse des impliziten Konvertierungsmechanismus für doppelte Gleichheitszeichen in Javascript

Definition und Verwendung der doppelt verknüpften JavaScript-Liste

Das obige ist der detaillierte Inhalt vonSo erreichen Sie mit JS eine schnelle Positionierung auf der Seite (Ankersprungproblem). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!