Slik ruller du til et element ved hjelp av JavaScript

Mens du surfer gjennom nettsidene, vil rulling til et element holde brukeren fokusert ved å fange oppmerksomheten deres i en lang periode. Denne funksjonaliteten kan brukes når en bruker trenger å rulle med kun et enkelt klikk eller, i tilfelle av automatiseringstesting, for å sjekke det tilføyde innholdet nederst på siden umiddelbart. I slike scenarier vil rulling til et element i JavaScript legge til funksjonalitet som kan brukes med et enkelt klikk uten mye brukerinteraksjon og sparer tid.

Denne håndboken vil veilede deg til å bla til et element ved hjelp av JavaScript.

Hvordan rulle til et element ved hjelp av JavaScript?

For å rulle til et element ved hjelp av JavaScript, kan du bruke:

• • ' scrollIntoView() 'metoden
  • ' rull() 'metoden
  • ' scrollTo() 'metoden

De nevnte tilnærmingene vil bli illustrert én etter én!

Metode 1: Rull til et element i JavaScript ved å bruke scrollIntoView()-metoden

« scrollIntoView() ”-metoden ruller et element inn i det synlige området til Document Object Model (DOM). Denne metoden kan brukes for å få den spesifiserte HTML-en og bruke den bestemte metoden på den ved hjelp av onclick-hendelsen.

Syntaks

I den gitte syntaksen, ' tilpasse ” indikerer justeringstypen.

Eksempel

I det følgende eksempelet legger du til følgende overskrift ved å bruke '

' stikkord:

< h2 > Klikk på knappen for å bla til elementet. h2 >

Lag nå en knapp med en ' ved trykk ' hendelse som påkaller funksjonen ' scrollElement() :

< knapp ved trykk = 'scrollElement()' > Rullelement knapp >
< br >

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

< bilde src = 'review.PNG' id = 'div' >

Til slutt, definer en funksjon kalt ' scrollElement() ' som vil hente det nødvendige elementet ved å bruke ' document.getElementById() ”-metoden og bruk scrollIntoView()-metoden på den for å rulle bildet:

funksjon scrollElement ( ) {
var element = document.getElementById ( 'div' ) ;
element.scrollIntoView ( ) ;
}

CSS-kode

I CSS-koden bruker du følgende dimensjoner for å justere bildestørrelsen ved å referere til bilde-ID-en ' div ':

#div{
høyde: 800px;
bredde: 1200px;
overløp: auto;
}

Den tilsvarende utgangen vil være:

Metode 2: Rull til et element i JavaScript ved å bruke window.scroll()-metoden

« window.scroll() ”-metoden ruller vinduet i henhold til koordinatverdiene i dokumentet. Denne metoden kan implementeres for å hente bilde-ID-en, angi koordinatene ved hjelp av en funksjon og bla i det angitte bildet.

Syntaks

window.scroll ( x-kord, y-kord )

I syntaksen ovenfor, ' x-kord ' refererer til X-koordinater, og ' y-koordinat ” indikerer Y-koordinatene.

Følgende eksempel forklarer det angitte konseptet.

Eksempel

Gjenta de samme trinnene for å legge til overskriften, lage en knapp, bruke onclick-hendelsen og spesifisere bildekilden med dens ID:

< h2 > Klikk på knappen for å bla til elementet. h2 >
< knapp ved trykk = 'scrollElement()' > Rullelement knapp >
< br >
< bilde src = 'image.PNG' id = 'div' >

Definer deretter en funksjon kalt ' scrollElement() '. Her vil vi justere koordinatene ved å bruke ' window.scroll() '-metoden ved å få tilgang til funksjonen kalt ' Stilling() ' og bruke det på det hentede bildeelementet:

funksjon scrollElement ( ) {
window.scroll ( 0 , Stilling ( document.getElementById ( 'div' ) ) ) ;
}

Definer deretter en funksjon kalt ' Stilling() tar en variabel obj som argument. Bruk også ' offsetForeldre ” eiendom, som vil få tilgang til nærmeste stamfar som ikke har en statisk posisjon og returnere den. Øk deretter den initialiserte nåværende toppverdien ved hjelp av ' offsetTopp ' egenskap som vil returnere toppposisjonen i forhold til overordnet (offsetParent) og returnere verdien av ' nåværende topp ' når den tilføyde betingelsen vurderes som sann:

funksjon Stilling ( obj ) {
hvor strømtopp = 0 ;
hvis ( obj.offsetForeldre ) {
gjøre {
strømtopp += obj.offsetTopp;
} samtidig som ( ( obj = obj.offsetParent ) ) ;
komme tilbake [ strømtopp ] ;
}
}

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

#div{
høyde: 1000px;
bredde: 1000px;
overløp: auto;
}

Produksjon

Metode 3: Rull til et element i JavaScript ved å bruke scrollTo()-metoden

« scrollTo() ”-metoden ruller det angitte dokumentet til tildelte koordinater. Denne metoden kan på samme måte implementeres for å få elementet ved å bruke dets id og utføre den nødvendige funksjonaliteten for å rulle det bestemte bildet på DOM.

Syntaks

window.scrollTo ( x og y )

Her, ' x ' og ' Y ” peker på x- og y-koordinatene.

Ta en titt på følgende eksempel.

Eksempel

Gjenta først trinnene som er diskutert ovenfor for å legge til en overskrift, knapp med en onclick-hendelse og bilde som følger:

< h2 > Klikk på knappen for å bla til elementet. h2 >
< knapp ved trykk = 'scrollElement()' > Rullelement knapp >
< br >
< img src = 'image.JPG' id = 'div' >

Definer deretter en funksjon kalt ' scrollElement() ” og sett rullen ved å påkalle Position()-metoden i scrollTo()-metoden:

funksjon scrollElement ( ) {
window.scrollTo ( 0 , Stilling ( document.getElementById ( 'div' ) ) ) ;
}

Definer til slutt en funksjon kalt Position() og bruk på samme måte de ovenfor omtalte trinnene for å sette koordinatene til det spesifiserte bildet:

funksjon Stilling ( obj ) {
hvor strømtopp = 0 ;
hvis ( obj.offsetForeldre ) {
gjøre {
strømtopp += obj.offsetTopp;
} samtidig som ( ( obj = obj.offsetParent ) ) ;
komme tilbake [ strømtopp ] ;
}
}

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() '-metoden for å få tilgang til elementet og bruke den angitte funksjonaliteten, ' window.scroll() '-metoden for å hente elementet, angi dets koordinater ved hjelp av en funksjon, og bla gjennom bildet, eller bruk ' scrollTo() ”-metoden for å hente elementet og rulle det deretter. Denne bloggen demonstrerte konseptet for å bla til et element ved hjelp av JavaScript.