Kako se pomaknuti do elementa pomoću JavaScripta

Tijekom surfanja web-stranicama, pomicanje do elementa drži korisnika usredotočenim privlačeći njegovu pažnju na dulje vrijeme. Ova se funkcionalnost može primijeniti kada se korisnik treba pomicati koristeći samo jedan klik ili, u slučaju automatiziranog testiranja, odmah provjeriti dodani sadržaj na dnu stranice. U takvim scenarijima, pomicanje do elementa u JavaScriptu dodaje funkcionalnost koja se može primijeniti jednim klikom bez puno interakcije korisnika i štedi vrijeme.

Ovaj priručnik će vas uputiti da se pomaknete do elementa koristeći JavaScript.

Kako se pomaknuti do elementa pomoću JavaScripta?

Za pomicanje do elementa pomoću JavaScripta, možete upotrijebiti:

• • “ scrollIntoView() ” metoda
  • “ svitak() ” metoda
  • “ scrollTo() ” metoda

Navedeni pristupi bit će ilustrirani jedan po jedan!

Metoda 1: Pomaknite se do elementa u JavaScriptu pomoću metode scrollIntoView().

' scrollIntoView() ” pomiče element u vidljivo područje Document Object Modela (DOM). Ova se metoda može primijeniti za dobivanje navedenog HTML-a i primjenu određene metode na njega uz pomoć onclick događaja.

Sintaksa

U navedenoj sintaksi, ' uskladiti ” označava vrstu poravnanja.

Primjer

U sljedećem primjeru dodajte sljedeći naslov koristeći '

” oznaka:

< h2 > Pritisnite gumb za pomicanje do elementa. h2 >

Sada izradite gumb s ' na klik ” događaj koji poziva funkciju ” scrollElement() :

< dugme na klik = 'scrollElement()' > Element pomicanja dugme >
< br >

Nakon toga navedite izvor slike i njen ID kako bi se pomicala:

< slika src = 'pregled.PNG' iskaznica = 'div' >

Na kraju, definirajte funkciju pod nazivom ' scrollElement() ' koji će dohvatiti traženi element koristeći ' document.getElementById() ” i primijenite metodu scrollIntoView() na nju kako biste pomicali sliku:

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

CSS kod

U CSS kodu primijenite sljedeće dimenzije za podešavanje veličine slike pozivajući se na ID slike ' div ”:

#div{
visina: 800px;
širina: 1200px;
preljev: automatski;
}

Odgovarajući izlaz će biti:

Metoda 2: Pomaknite se do elementa u JavaScriptu pomoću metode window.scroll().

' window.scroll() ” pomiče prozor prema vrijednostima koordinata u dokumentu. Ova se metoda može implementirati za dohvaćanje ID-a slike, postavljanje njezinih koordinata pomoću funkcije i pomicanje navedene slike.

Sintaksa

prozor.svitak ( x-koordinata, y-koordinata )

U gornjoj sintaksi, ' x-koordinata ” odnosi se na X koordinate, a „ y-koordinata ” označava Y koordinate.

Sljedeći primjer objašnjava navedeni koncept.

Primjer

Ponovite iste korake za dodavanje naslova, stvaranje gumba, primjenu onclick događaja i navođenje izvora slike s njegovim ID-om:

< h2 > Pritisnite gumb za pomicanje do elementa. h2 >
< dugme na klik = 'scrollElement()' > Element pomicanja dugme >
< br >
< slika src = 'slika.PNG' iskaznica = 'div' >

Zatim definirajte funkciju pod nazivom ' scrollElement() ”. Ovdje ćemo prilagoditi koordinate pomoću ' window.scroll() ' pristupom funkciji pod nazivom ' Položaj() ” i primjenom na dohvaćeni element slike:

funkcija scrollElement ( ) {
prozor.svitak ( 0 , Položaj ( document.getElementById ( 'div' ) ) ) ;
}

Nakon toga definirajte funkciju pod nazivom ' Položaj() ” uzimajući varijablu obj kao argument. Također, primijenite ' offsetParent ” svojstvo, koje će pristupiti najbližem pretku koji nema statičnu poziciju i vratiti ga. Zatim povećajte inicijaliziranu trenutnu gornju vrijednost uz pomoć ' offsetTop ' svojstvo koje će vratiti gornju poziciju u odnosu na roditelja (offsetParent) i vratiti vrijednost ' trenutni vrh ” kada se dodani uvjet procijeni kao istinit:

funkcija Položaj ( obj ) {
gdje je trenutni vrh = 0 ;
ako ( obj.offsetParent ) {
čini {
currenttop += obj.offsetTop;
} dok ( ( obj = obj.offsetParent ) ) ;
povratak [ trenutni vrh ] ;
}
}

Na kraju, stilizirajte stvoreni spremnik prema svojim zahtjevima:

#div{
visina: 1000px;
širina: 1000px;
preljev: automatski;
}

Izlaz

Metoda 3: Pomaknite se do elementa u JavaScriptu pomoću metode scrollTo().

' scrollTo() ” pomiče navedeni dokument na dodijeljene koordinate. Ova se metoda može na sličan način implementirati za dobivanje elementa korištenjem njegovog ID-a i izvođenjem potrebnih funkcija za pomicanje određene slike na DOM-u.

Sintaksa

window.scrollTo ( x i y )

Ovdje, ' x ' i ' Y ” pokazuju na x i y koordinate.

Pogledajte sljedeći primjer.

Primjer

Najprije ponovite gore navedene korake za dodavanje naslova, gumba s događajem onclick i slike na sljedeći način:

< h2 > Pritisnite gumb za pomicanje do elementa. h2 >
< dugme na klik = 'scrollElement()' > Element pomicanja dugme >
< br >
< img src = 'slika.JPG' iskaznica = 'div' >

Zatim definirajte funkciju pod nazivom ' scrollElement() ” i postavite pomicanje pozivanjem metode Position() u metodi scrollTo():

funkcija scrollElement ( ) {
window.scrollTo ( 0 , Položaj ( document.getElementById ( 'div' ) ) ) ;
}

Na kraju, definirajte funkciju pod nazivom Position() i na sličan način primijenite gore navedene korake za postavljanje koordinata navedene slike:

funkcija Položaj ( obj ) {
gdje je trenutni vrh = 0 ;
ako ( obj.offsetParent ) {
čini {
currenttop += obj.offsetTop;
} dok ( ( obj = obj.offsetParent ) ) ;
povratak [ trenutni vrh ] ;
}
}

Izlaz

Raspravljali smo o svim praktičnim metodama za pomicanje do elementa pomoću JavaScripta.

Zaključak

Za pomicanje do elementa u JavaScriptu upotrijebite ' scrollIntoView() ' za pristup elementu i primjenu navedene funkcije, ' window.scroll() ' kako biste dohvatili element, postavili njegove koordinate pomoću funkcije i pomicali sliku ili upotrijebili ' scrollTo() ” kako biste dohvatili element i pomicali ga u skladu s tim. Ovaj je blog pokazao koncept pomicanja do elementa pomoću JavaScripta.