jquery-Methode, um den Inhalt der Datei durch Laden abzurufen und zum Ankerpunkt_jquery zu springen

Das Beispiel in diesem Artikel beschreibt, wie JQuery den Inhalt der Datei durch Laden erhält und zum Ankerpunkt springt. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Gestern habe ich eine Seite erstellt, die einem Hilfedokument ähnelt, mit Navigation auf der linken Seite und Inhalt auf der rechten Seite. Ursprünglich hatte ich geplant, einen Iframe zu verwenden, um den Inhaltsanzeigebereich auf der rechten Seite zu implementieren, aber da ich die Höhe des Iframes anpassen musste, habe ich die Methode geändert und die Lademethode im Ajax von jquery verwendet.

Das Abrufen des Inhalts einer Remote-Datei ist einfach zu implementieren. Verwenden Sie einfach die Lademethode von jquery:

$("#content").load("xxx.aspx")

Dadurch ist es einfach, den Inhalt in der Datei xxx.aspx im Tag mit der Inhalts-ID zu platzieren. Ein weiterer Effekt, der jetzt erreicht werden muss, ist: Nachdem ich den Inhalt der Datei erhalten habe, muss ich zum entsprechenden Ankerpunkt springen, also habe ich darüber nachgedacht, jquerys scrollTop zu verwenden muss zum Tag mit id="name" :

wechseln

$("body,html").animate({scrollTop:$("#name").offset().top});

offset() dient dazu, den relativen Versatz des passenden Elements im aktuellen Ansichtsfenster abzurufen. $("#name").offset().top dient dazu, den relativen Versatz der Beschriftung mit dem ID-Namen vom oberen Rand abzurufen das aktuelle Ansichtsfenster. Der obige Code muss in einem Stück zusammengefasst werden und muss wie folgt geschrieben werden:

$(function(){
 $("#content").load("xxx.aspx",function(){
  $("body,html").animate({scrollTop:$("#name").offset().top});
 });
})

Um zu vermeiden, dass durch Klicken auf die Navigation ständig Anfragen an den Server gesendet werden, können wir die jedes Mal erfassten Daten speichern.

Diese Methode eignet sich natürlich nur für Seiten, die keine SEO-Optimierung berücksichtigen.

Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.