So scrollen Sie mit JavaScript zu einem Element
Während des Surfens durch die Webseiten hält das Scrollen in ein Element den Benutzer konzentriert, indem er seine Aufmerksamkeit für einen langen Zeitraum auf sich zieht. Diese Funktionalität kann angewendet werden, wenn ein Benutzer mit nur einem einzigen Klick scrollen muss, oder im Fall von Automatisierungstests den hinzugefügten Inhalt unten auf der Seite sofort überprüfen. In solchen Szenarien fügt das Scrollen zu einem Element in JavaScript die Funktionalität hinzu, die mit einem einzigen Klick ohne viel Benutzerinteraktion angewendet werden soll, und spart Zeit.
In diesem Handbuch werden Sie mit JavaScript zu einem Element scrollen.
So scrollen Sie mit JavaScript zu einem Element?
Um mit JavaScript zu einem Element zu scrollen, können Sie verwenden:
-
- “scrollintoview ()" Methode
- “scrollen()" Methode
- “scrollto ()" Methode
Die genannten Ansätze werden nacheinander illustriert!
Methode 1: scrollen
Der "scrollintoview ()Methode scrollt ein Element in den sichtbaren Bereich des Dokumentobjektmodells (DOM) in den sichtbaren Bereich des Dokumentobjektmodells (DOM). Diese Methode kann angewendet werden, um das angegebene HTML zu erhalten und die jeweilige Methode mit Hilfe des Onclick -Ereignisses anzuwenden.
Syntax
Element.Scrollintoview (Ausrichtung)
In der gegebenen Syntax “,“ausrichten”Zeigt den Align -Typ an.
Beispiel
Fügen Sie im folgenden Beispiel die folgende Überschrift mit der “hinzu“ Klicken Sie auf die Schaltfläche, um zum Element zu scrollen. Wenden Sie im CSS -Code die folgenden Abmessungen zum Anpassen der Bildgröße an, indem Sie sich auf die Bild -ID beziehendiv”: Methode 2: Scrollen Sie mit dem Fenster zu einem Element in JavaScript.scroll () Methode Der "Fenster.scrollen()Methode scrollen das Fenster gemäß den Koordinatenwerten im Dokument. Diese Methode kann implementiert werden, um die Bild -ID abzurufen, ihre Koordinaten mithilfe einer Funktion festzulegen und das angegebene Bild zu scrollen. Syntax Das folgende Beispiel erklärt das angegebene Konzept. Beispiel Wiederholen Sie dieselben Schritte, um die Überschrift hinzuzufügen, eine Schaltfläche zu erstellen, das Onclick -Ereignis anzuwenden und die Bildquelle mit seiner ID anzugeben: Klicken Sie auf die Schaltfläche, um zum Element zu scrollen. Methode 3: scrollen Der "scrollto ()Methode scrollen das angegebene Dokument in zugewiesene Koordinaten. Diese Methode kann in ähnlicher Weise implementiert werden, um das Element durch die Verwendung seiner ID zu erhalten und die erforderliche Funktionalität auszuführen, um das jeweilige Bild auf die DOM zu scrollen. Syntax Schauen Sie sich das folgende Beispiel an. Beispiel Wiederholen Sie zunächst die oben besprochenen Schritte, um eine Überschrift, eine Schaltfläche mit einem Onclick -Ereignis und das Bild wie folgt hinzuzufügen: Klicken Sie auf die Schaltfläche, um zum Element zu scrollen. Abschluss Um zu einem Element in JavaScript zu scrollen, verwenden Sie die “scrollintoview ()Methode, um auf das Element zuzugreifen und die angegebene Funktionalität anzuwenden, die “Fenster.scrollen()Methode zum Abrufen des Elements, festlegen, seine Koordinaten mithilfe einer Funktion festlegen und das Bild scrollen oder die “verwenden“scrollto ()Methode, um das Element zu holen und es entsprechend zu scrollen. Dieser Blog hat das Konzept demonstriert, um mit JavaScript zu einem Element zu scrollen.
Erstellen Sie nun eine Schaltfläche mit einem “ONCLICK"Ereignis auf die Funktion"Scrollelement ():
Geben Sie danach die Bildquelle und ihre ID an, um zu scrolliert:
Schließlich definieren Sie eine Funktion namens “Scrollelement ()Das wird das erforderliche Element mit der "abrufen"dokumentieren.GetElementById ()Methode und wenden Sie die Methode scrollintoview () an, um das Bild zu scrollen:Funktion scrollelement ()
var element = document.GetElementById ("Div");
Element.scrollintoview ();
CSS -Code#div
Höhe: 800px;
Breite: 1200px;
Überlauf: Auto;
Die entsprechende Ausgabe ist:Fenster.scrollen (X-Coord, Y-Coord)
In der obigen Syntax “,“X-Koord"Bezieht sich auf X -Koordinaten und"Y-Koord”Zeigt die Y -Koordinaten an.
Definieren Sie als nächstes eine Funktion namens “Scrollelement ()”. Hier werden wir die Koordinaten mit der “anpassenFenster.scrollen()Methode durch Zugriff auf die mit dem Namen "genannte Funktion"Position()Und auf das abgerufene Bildelement anwenden:Funktion scrollelement ()
Fenster.scrollen (0, Position (Dokument.GetElementById ("div")));
Danach definieren Sie eine Funktion namens “Position()”Ein variabler OBJ als Argument nehmen. Wenden Sie auch das an “OffsetParentEigentum, das auf den nächsten Vorfahren zugreifen wird, der keine statische Position hat und sie zurückgibt. Inkrementieren Sie dann den initialisierten aktuellen Top -Wert mit Hilfe des “OffsettopEigenschaft, die die oberste Position in Bezug auf den Elternteil (OffsetParent) zurückgibt und den Wert von “zurückgibt“Aktuelles OberteilWenn die zusätzliche Bedingung als wahr bewertet wird:Funktionsposition (obj)
var curr CurrentTop = 0;
if (obj.OffsetParent)
Tun
currentTop += obj.Offsettop;
while ((obj = obj.OffsetParent));
return [currentTop];
Schließlich stylen Sie den erstellten Container entsprechend Ihren Anforderungen:#div
Höhe: 1000px;
Breite: 1000px;
Überlauf: Auto;
AusgangFenster.Scrollto (x, y)
Hier, "X" Und "yZeigen Sie auf die X- und Y -Koordinaten.
Definieren Sie als nächstes eine Funktion namens “Scrollelement ()”Und setzen Sie die Scrollen durch, indem Sie die Methode von Position () in der Methode scrollto () aufrufen:Funktion scrollelement ()
Fenster.Scrollto (0, Position (Dokument.GetElementById ("div")));
Definieren Sie zuletzt eine Funktion namens Position () und wenden Sie in ähnlicher Weise die oben genannten Schritte zum Festlegen der Koordinaten des angegebenen Bildes an:Funktionsposition (obj)
var curr CurrentTop = 0;
if (obj.OffsetParent)
Tun
currentTop += obj.Offsettop;
while ((obj = obj.OffsetParent));
return [currentTop];
Ausgang
Wir haben alle bequemen Methoden besprochen, um mit JavaScript zu einem Element zu scrollen.