4 Methoden zum Scrollen zu Element in jQuery

1. Voraussetzungen für Scroll to Element in jQuery
2. jQuery Scroll to Element - Scrollen Sie im Dokumentfenster
3. jQuery Animate ScrollTop - Reibungsloses Scrollen mit der animate-Methode
4. jQuery ScrollTop zu internem Link – Reibungsloses Scrollen von jQuery
5. jQuery Blättern Sie zu Element innerhalb eines Containers
6. Zu beachtende Tipps
7. Zwei Quick-Short-Cuts für jQuery ScrollTop

Wir zeigen einfache Lösungen zum Scrollen zu einem Element für verschiedene Anwendungsfälle in jQuery. Wir verwenden die Methoden scrollTop() und offset(), demonstrieren aber auch einen neuen Weg mit position().

Sie werden sehen, wie man flüssiges Scrollen mit jQuery animiert. Abschließend demonstrieren wir zwei gängige Shortcuts und einige Tipps zur Vermeidung von Fehlern.

Voraussetzungen für Scroll to Element in jQuery

1. scrollTop()
2. offset()
3. position()

Sehen wir uns zunächst die Methoden an, die wir verwenden, um zu einem Element in jQuery zu scrollen.

scrollTop()

Mit der jQuery-Methode scrollTop() können wir die Eigenschaft scrollTop eines beliebigen Elements abrufen und setzen. Der Wert der Eigenschaft scrollTop ist die Anzahl Pixel, um die der Inhalt eines Elements derzeit vertikal gescrollt wird.

Mehr über die Eigenschaft scrollTop erfahren Sie hier.

.scrollTop() - Ruft den aktuellen scrollTop-Wert ab

Wir verwenden scrollTop() ohne Argumente, um den Wert des aktuellen scrollTop-Werts eines Elements zurückzugeben.

console.log($('#container').scrollTop());

Wir sehen den Wert der scrollTop-Ansicht des Elements in der Konsole. Lassen Sie uns nun das Element an eine andere Position scrollen und den Wert der Eigenschaft scrollTop erneut protokollieren.

Hier sehen wir, dass die Konsole einen anderen Wert protokolliert. Die jQuery-Methode scrollTop() in diesem get-Formular ist der Schlüssel zum Erreichen unseres Scroll-Effekts.

.scrollTop(val) - Legt den neuen scrollTop-Wert fest

Wir können den Wert, zu dem wir (vertikal) scrollen möchten, in der jQuery-Methode scrollTop() in der Form set übergeben.

$('document.documentElement').scrollTop(0);

Dadurch wird das Hauptdokument nach oben gescrollt, da wir den Wert 0 übergeben. Wir werden dies wieder als hilfreiche Abkürzung sehen.

Wir werden einige Schlüsselwerte an diese set-Form von scrollTop() übergeben, um unser jQuery-Scroll-to-Element-Verhalten zu erreichen.

Sie können sich hier ausführlich über die jQuery-Funktion scrollTop() informieren.

offset() - Finden Sie die Position eines Elements, um reibungsloses Scrollen in jQuery zu implementieren

Mit der jQuery-Methode offset() können wir die aktuelle Position eines beliebigen Elements für das Dokument ermitteln. Diese Methode gibt zwei Eigenschaften zurück, top und left; dies ist die Anzahl der Pixel des Randfelds des Dokuments (d. h. ohne die Ränder).

console.log(`The position of the element w.r.t document is : ${
    $('#container').offset().top}`);

Die Methode offset() zeigt die oberste Position des Elements relativ zum Dokument an.

Lesen Sie hier mehr über die jQuery-Methode offset().

position() - Eine andere Möglichkeit, Scroll to Element in jQuery zu implementieren

Die Methode position() ähnelt der Methode offset() mit einem kleinen Unterschied – sie gibt die Position des Elements relativ zu seinem nächsten übergeordneten Element zurück. Wenn wir also die relative Position eines Elements optimieren, um zum Beispiel scrolltop in jQuery zu animieren, ist die Methode position() nützlich.

Details zur jQuery-Methode position() finden Sie unter diesem link.

position() gibt die Position des Elements zurück, einschließlich seiner Ränder (hier unterscheidet es sich von der Methode offset()).

// displays the position w.r.t. its closest parent

console.log(`This is the position of the element w.r.t. its closest parent:
${$('.filler:first').position().top}`);

// the offset() method displays position relative to the document

console.log(`This is the position of the element w.r.t. the document:
${$('.filler:first').offset().top}`);

Lassen Sie uns, nachdem die Grundlagen aus dem Weg geräumt sind, zu einem Element für verschiedene Anwendungsfälle in jQuery scrollen.

jQuery Scroll to Element - Scrollen Sie im Dokumentfenster

$('#clickButton').on('click', function() {
  $([
    document.documentElement, document.body
  ]).scrollTop($('#scrollToMe').offset().top);
});

1. #clickButton ist die Schaltfläche, auf die geklickt werden muss, um zum Zielelement zu scrollen.
2. #scrollToMe ist das Element, zu dem wir scrollen möchten.

Lassen Sie uns den Code aufschlüsseln:

Wir hängen einen Event-Handler mit der Methode .on an unseren Button an. Das Ereignis, das diesen Handler auslöst, ist das erste Argument, das Ereignis "click".

Wenn der Benutzer auf die Schaltfläche klickt, führt der Code die (anonyme) Callback-Funktion im zweiten Argument der .on-Methode aus.

Wir wählen zuerst das gesamte Dokument aus, um mit einem der beiden Auswahlargumente zu scrollen – document.documentElement, das das Wurzelelement ist, oder in diesem Fall das html-Element, und das document.body-Element.

Wir führen dann die Methode scrollTop() auf diesem Element in seiner set-Form aus (siehe oben). Wir wollen zu unserem Zielelement scrolltop – dem Bildelement mit der ID #scrollToMe.

Also finden wir zuerst die Anzahl der Pixel vom oberen Rand der Seite bis zu diesem Zielbildelement mit der Methode offset().top - denken Sie daran, dass diese Methode die Position relativ zum Dokument findet.

Dann übergeben wir diesen Wert an die Methode scrollTop(), die an das Root/Body-Element des Dokuments angehängt ist. Die gesamte Webseite bewegt sich also zum Zielbildelement, wie in der Videodemonstration oben zu sehen ist.

Somit erreicht diese Methode auf einfache Weise das jQuery-Scroll-to-Element-Verhalten.

Aber ehrlich gesagt sieht dieses sofortige Scrollen zum Zielelement langweilig aus. Lassen Sie uns mehr Code hinzufügen, um den gut aussehenden jQuery-Effekt mit fließendem Scrollen zu erhalten.

jQuery Animate ScrollTop - Reibungsloses Scrollen mit der animate-Methode

$('#clickButton').on('click', function() {
  $([
    document.documentElement, document.body
  ]).animate({scrollTop: $('#scrollToMe').offset().top}, 500)
});

Der Code ähnelt der vorherigen Methode. Wir führen die Methode animate() nur auf dem ausgewählten Root/Body-Element aus.

Ein erstes Argument ist ein Objekt mit den Ziel-CSS-Paaren property:value, zu denen wir animieren möchten.

Hier wollen wir nur die Eigenschaft scrollTop ändern, um unser Zielbildelement zu erreichen. Also weisen wir dem Bild den Wert der Anzahl der Pixel vom Seitenanfang zu.

Das finden wir mit der Methode .offset().top auf dem Bildelement heraus, genau wie in der vorherigen Methode.

jQuery ScrollTop zu internem Link – Reibungsloses Scrollen von jQuery

Wir können auch ein wiederverwendbares jQuery scrolltop-Modul zu jedem internen Link mit dem folgenden Code erstellen.

$('a[href^="#"]').on('click', function(e) {
  e.preventDefault();
  let targetHash = this.hash;
  let targetEle = $(targetHash);

  $([
    document.documentElement, document.body
  ]).animate({scrollTop: targetEle.offset().top}, 500);
})

Lassen Sie uns hier einen Drilldown in die Codelogik durchführen. (Bitte beachten Sie die Dateien scrollToInternalLink.html, scrollToInternalLink.js und scrollToInternalLink.css.)

Zuerst wählen wir a-Tags mit dem jQuery-Attributselektor [href^="#"] aus. Wir verwenden das ^-Zeichen, sodass jQuery nur die a-Tags mit einem href-Attribut auswählt, das mit dem #-Zeichen beginnt.

Wir verlinken intern auf jedes Element, indem wir Fragmentkennungen verwenden. Dies sind Verweise auf interne Links, denen wir immer das Zeichen # voranstellen.

Unser jQuery-Selektor oben wählt also die internen Links auf der Seite aus.

Sie können hier mehr über interne Links in HTML lesen.

Anschließend rufen wir die Methode e.preventDefault() auf, um das Standardverhalten des a-Tags zu deaktivieren, das die Seite neu lädt.

Nun extrahieren wir den hash des Zielelements – dies ist die Referenz auf die Fragmentkennung des Zielelements. Die meisten modernen HTML-Codes verwenden das Attribut id unseres Zielelements.

Wir verwenden diesen hash, um unser Zielelement auszuwählen.

Der Rest des Codes ist derselbe wie der obige Code jQuery animate to scroll to. Wir übergeben die Methode animate() und setzen die Eigenschaft scrollTop auf den Wert offset().top des Zielelements.

jQuery Blättern Sie zu Element innerhalb eines Containers

Manchmal befindet sich unser Zielelement in einem scrollbaren Container. Wir können den folgenden Code verwenden, um ein so positioniertes Element per jQuery abzufragen.

let container = $('#container');
let scrollToMe = $('#scrollToMe');

$('button').on('click', function() {
  container.animate(
      {
        scrollTop: scrollToMe.offset().top - container.offset().top +
            container.scrollTop()
      },
      500)
});

Hier ist #container ein äußeres div-Element, das als unser Container fungiert.

#scrollToMe ist das Zielbild, zu dem wir scrollen möchten. Es ist innerhalb des äußeren div-Containers verschachtelt.

Außerdem enthält der äußere div-Container weitere verschachtelte div- und p-Elemente. Dieser äußere div-Container ist scrollbar und hat eine vertikale Bildlaufleiste.

Wir fügen dem auslösenden Button den Event-Handler click hinzu. Der Callback führt die animate-Methode auf dem Containerelement aus.

Es setzt die Eigenschaft scrollTop des Containers auf einen neuen Wert. Wir berechnen diesen neuen Wert mit der folgenden Formel.

scrollToMe.offset().top - container.offset().top + container.scrollTop()

1. scrollToMe.offset().top ist die Anzahl der Pixel vom oberen Rand des Dokuments bis zum Zielbildelement.
2. container.offset().top ist die Anzahl der Pixel vom oberen Rand der Seite bis zum oberen Rand des div-Containerelements.

Aber es gibt einen kleinen Haken. Das Containerelement div ist scrollbar; Wenn es anfänglich gescrollt wird, hat es sich um so viele Pixel nach unten bewegt.

Also müssen wir diesen Faktor von container.scrollTop() zu dem Parameter hinzufügen, den wir an die Methode scrollTop übergeben.

Zu beachtende Tipps

Wir haben zwei wichtige Tipps zum Scrollen zu einem Element mit den obigen Methoden von jQuery.

Profi-Tipp 1:

Die Methoden offset und position geben einen float-Wert zurück, und wenn Sie viele Zooms auf Ihrer Seite erwarten, kann dies zu Fehlern führen. Sie könnten also die Funktion parseInt verwenden, um den zurückgegebenen Wert zunächst in einen int-Wert umzuwandeln.

$('#clickButton').on('click', function() {
  $([
    document.documentElement, document.body
  ]).scrollTop($('#scrollToMe').parseInt(offset().top));
});

Profi-Tipp 2:

Auch die animation() nimmt als Argument eine Easing-Funktion. Diese Funktion entscheidet, wie die Animation ausgeführt wird.

Der Standardwert dieser Funktion ist swing, was für einen glatten und gleichmäßigen Animationseffekt sorgt. Wir können also diesen Standardwert verwenden, um die glatt scrollende jQuery selbst zu erhalten.

Zwei Quick-Short-Cuts für jQuery ScrollTop

Schließlich haben wir zwei schnelle Abkürzungen für zwei gängige Anwendungsfälle von jQuery, um zu einem Element zu scrollen.

jQuery Zum Anfang der Dokumentverknüpfung scrollen

Wenn Sie eine lange Webseite mit vielen Inhalten haben, sollten Sie zur einfachen Navigation unten einen Link nach oben scrollen einfügen.

Der Shortcut-Code für einen solchen Ankerlink lautet:

// this code scrolls to the top of the document with a click on the anchor
// element

$('#top').on('click', function() {
  $(document.documentElement, document.body).animate({scrollTop: 0}, 500);
});

Wir setzen den Zielwert scrollTop der Funktion animate auf 0 – was uns zum Anfang der Seite scrollt.

Fügen Sie der URL in jQuery Scroll to Element eine Hash-/Fragmentkennung hinzu

Wenn Sie die Fragmentkennung Ihres Zielelements zur URL in der Adressleiste hinzufügen möchten, müssen Sie nur eine Zeile zu unserem Scroll-to-Anchor-Link-Code oben hinzufügen.

// this code adds the fragment identifier/hash of the target
// element to the URL

// this is a reusable module to jQuery scrollTop from any internal link

$('a[href^="#"]').on('click', function(e) {
  e.preventDefault();
  let targetHash = this.hash;
  let targetEle = $(targetHash);

  $([
    document.documentElement, document.body
  ]).animate({scrollTop: targetEle.offset().top}, 500, function() {
    window.location.hash = targetHash;
  });
})

Die Zeile window.location.hash = targetHash ist der Code, der diese Funktionalität bereitstellt.

Sie können sehen, dass der Element-Hash/Fragment-Identifikator scrollToMe am Ende der URL hinzugefügt wird.

Achten Sie darauf, dieses Code-Snippet als Callback für die Funktion animate einzufügen, um sicherzustellen, dass sie nach der Animation ausgeführt wird – synchron zu den Best Practices von JavaScript.