Hvordan bla til et element ved hjelp av JavaScript

Lag nå en knapp med en "ved trykk”Hendelse som påkaller funksjonen”rullelement ():

Rulleelement

Etter det, spesifiser bildekilden og dens ID for å bli rullet:

Til slutt, definer en funksjon som heter “rullelement ()”Som vil hente det nødvendige elementet ved å bruke“dokument.getElementById ()”Metode og bruk ScrollIntoview () -metoden på den for å bla på bildet:

funksjon rollelement ()
var element = dokument.getElementById ("Div");
element.ScrollIntoview ();

CSS -kode

I CSS -koden, bruk følgende dimensjoner for å justere bildestørrelsen ved å henvise til bilde -ID “div”:

#div
Høyde: 800px;
Bredde: 1200px;
overløp: auto;

Tilsvarende utgang vil være:

Metode 2: Bla til et element i JavaScript ved hjelp av vindu.rulle () -metode

“vindu.rulle ()”Metode ruller vinduet i henhold til koordinatverdiene i dokumentet. Denne metoden kan implementeres for å hente bilde -IDen, angi koordinatene ved hjelp av en funksjon og bla det spesifiserte bildet.

Syntaks

vindu.Scroll (X-koord, y-koord)

I syntaks ovenfor, "X-Koord”Henviser til X -koordinater, og“y-koord”Indikerer Y -koordinatene.

Følgende eksempel forklarer det uttalte konseptet.

Eksempel

Gjenta de samme trinnene for å legge til overskriften, opprette en knapp, bruk OnClick -hendelsen og spesifiser bildekilden med IDen:

Klikk på knappen for å bla til elementet.

Rulleelement

Deretter definerer du en funksjon som heter “rullelement ()”. Her vil vi justere koordinatene ved å bruke “vindu.rulle ()”Metode ved å få tilgang til funksjonen som heter“Posisjon()”Og bruk det på det hentede bildeelementet:

funksjon rollelement ()
vindu.bla (0, posisjon (dokument.getElementById ("div")));

Etter det, definer en funksjon som heter “Posisjon()”Å ta en variabel OBJ som argument. Bruk også “offsetparent”Eiendom, som vil få tilgang til den nærmeste stamfaren som ikke har en statisk stilling og returnerer den. Øk deretter den initialiserte nåværende toppverdien ved hjelp av "avsetting”Eiendom som vil returnere topplassering med hensyn til foreldrene (Offsetparent) og returnere verdien av“Nåværende topp”Når den ekstra tilstanden blir evaluert som sann:

funksjonsposisjon (obj)
var currentTop = 0;
hvis (obj.offsetparent)
gjøre
CurrentTop += obj.avsetting;
mens ((obj = obj.offsetparent));
retur [currentTop];

Til slutt, stil den opprettede beholderen i henhold til dine krav:

#div
Høyde: 1000px;
Bredde: 1000px;
overløp: auto;

Produksjon

Metode 3: Bla til et element i JavaScript ved hjelp av ScrollTo () -metode

“Scrollto ()”Metode ruller det spesifiserte dokumentet til tildelte koordinater. Denne metoden kan på samme måte implementeres for å få elementet ved å bruke sin ID og utføre den nødvendige funksjonaliteten for å bla det aktuelle bildet på DOM.

Syntaks

vindu.Scrollto (x, y)

Her, “x”Og“y”Pek på X- og Y -koordinatene.

Ta en titt på følgende eksempel.

Eksempel

Først må du gjenta trinnene som er diskutert ovenfor for å legge til en overskrift, knapp med en OnClick -hendelse, og bilde som følger:

Klikk på knappen for å bla til elementet.

Rulleelement

Deretter definerer du en funksjon som heter “rullelement ()”Og sett rullen ved å påkalle Position () -metoden i ScrollTo () -metoden:

funksjon rollelement ()
vindu.Scrollto (0, posisjon (dokument.getElementById ("div")));

Sist, definer en funksjon som heter Position () og bruker på samme måte de ovennevnte trinnene for å sette koordinatene til det spesifiserte bildet:

funksjonsposisjon (obj)
var currentTop = 0;
hvis (obj.offsetparent)
Gjør
CurrentTop += obj.avsetting;
mens ((obj = obj.offsetparent));
retur [currentTop];

Produksjon

Vi har diskutert alle de praktiske metodene for å bla til et element ved hjelp av JavaScript.

Konklusjon

For å bla til et element i JavaScript, bruk "ScrollIntoview ()”Metode for å få tilgang til elementet og bruke den spesifiserte funksjonaliteten,“vindu.rulle ()”Metode for å hente elementet, angi koordinatene ved hjelp av en funksjon, og bla på bildet, eller bruke“Scrollto ()”Metode for å hente elementet og bla det deretter. Denne bloggen demonstrerte konseptet for å bla til et element ved hjelp av JavaScript.