Kaip slinkti iki elemento naudojant „JavaScript“.

Naršydamas tinklalapiuose, slinkdamas iki elemento, vartotojas ilgą laiką sukoncentruoja dėmesį. Šią funkciją galima pritaikyti, kai vartotojui reikia slinkti vienu spustelėjimu arba, automatizavimo testavimo atveju, norint akimirksniu patikrinti pridėtą turinį puslapio apačioje. Tokiais atvejais slinkimas iki elemento „JavaScript“ suteikia papildomų funkcijų, kurias galima pritaikyti vienu spustelėjimu be daug naudotojo sąveikos, ir sutaupo laiko.

Šis vadovas padės jums pereiti prie elemento naudojant „JavaScript“.

Kaip slinkti iki elemento naudojant „JavaScript“?

Norėdami pereiti prie elemento naudodami „JavaScript“, galite naudoti:

• • “ scrollIntoView() “ metodas
  • “ slinkti () “ metodas
  • “ slinkti į () “ metodas

Minėti metodai bus iliustruoti po vieną!

1 būdas: slinkite iki elemento „JavaScript“, naudodami metodą scrollIntoView().

„ scrollIntoView() ” metodas slenka elementą į matomą dokumento objekto modelio (DOM) sritį. Šis metodas gali būti taikomas norint gauti nurodytą HTML ir pritaikyti jam konkretų metodą naudojant onclick įvykį.

Sintaksė

Pateiktoje sintaksėje „ lygiuotis “ nurodo lygiavimo tipą.

Pavyzdys

Šiame pavyzdyje pridėkite šią antraštę naudodami „

“ žyma:

< h2 > Spustelėkite mygtuką, kad pereitumėte prie elemento. h2 >

Dabar sukurkite mygtuką su „ paspaudus 'įvykis, iškviečiantis funkciją' slinkties elementas () :

< mygtuką paspaudus = 'scrollElement()' > Slinkties elementas mygtuką >
< br >

Po to nurodykite vaizdo šaltinį ir jo ID, kad būtų galima slinkti:

< vaizdas src = 'apžvalga.PNG' id = 'div' >

Galiausiai apibrėžkite funkciją pavadinimu ' slinkties elementas () “, kuris gaus reikiamą elementą naudojant „ document.getElementById() “ metodą ir naudokite metodą scrollIntoView(), kad slinktumėte vaizdą:

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

CSS kodas

CSS kode taikykite šiuos matmenis, norėdami pakoreguoti vaizdo dydį, atsižvelgdami į vaizdo ID ' div “:

#div{
aukštis: 800 pikselių;
plotis: 1200px;
perpildymas: automatinis;
}

Atitinkama išvestis bus tokia:

2 būdas: slinkite iki elemento „JavaScript“ naudodami „window.scroll()“ metodą

„ window.scroll() ” metodas slenka langu pagal koordinačių reikšmes dokumente. Šis metodas gali būti įgyvendintas norint gauti vaizdo ID, nustatyti jo koordinates naudojant funkciją ir slinkti nurodytą vaizdą.

Sintaksė

langas.slinkti ( x-koordą, y-koordą )

Aukščiau pateiktoje sintaksėje „ x-koordą “ reiškia X koordinates ir „ y-koordą “ nurodo Y koordinates.

Toliau pateiktame pavyzdyje paaiškinama nurodyta koncepcija.

Pavyzdys

Pakartokite tuos pačius veiksmus, kad pridėtumėte antraštę, sukurtumėte mygtuką, pritaikytumėte onclick įvykį ir nurodytumėte vaizdo šaltinį su jo ID:

< h2 > Spustelėkite mygtuką, kad pereitumėte prie elemento. h2 >
< mygtuką paspaudus = 'scrollElement()' > Slinkties elementas mygtuką >
< br >
< vaizdas src = 'vaizdas.PNG' id = 'div' >

Tada apibrėžkite funkciją pavadinimu ' slinkties elementas () “. Čia mes pakoreguosime koordinates naudodami ' window.scroll() “ metodą, pasiekdami funkciją pavadinimu “ Padėtis () “ ir pritaikyti jį gautame vaizdo elemente:

funkcija slinkties elementas ( ) {
langas.slinkti ( 0 , Padėtis ( document.getElementById ( 'div' ) ) ) ;
}

Po to apibrėžkite funkciją pavadinimu ' Padėtis () “, kaip argumentą imant kintamąjį obj. Taip pat taikykite „ offsetParent ” nuosavybė, kuri pasieks artimiausią protėvį, neturintį statinės padėties ir jį grąžins. Tada padidinkite inicijuotą dabartinę didžiausią vertę naudodami „ offsetTop “ ypatybę, kuri grąžins aukščiausią poziciją pirminio (offsetParent) atžvilgiu ir grąžins „ reikšmę dabartinis viršus “, kai pridėta sąlyga įvertinama kaip teisinga:

funkcija Padėtis ( obj ) {
kur srovės viršus = 0 ;
jeigu ( obj.offsetParent ) {
daryti {
currenttop += obj.offsetTop;
} kol ( ( obj = obj.offsetParent ) ) ;
grąžinti [ srovės viršus ] ;
}
}

Galiausiai sukurkite sukurto konteinerio stilių pagal savo poreikius:

#div{
aukštis: 1000 pikselių;
plotis: 1000px;
perpildymas: automatinis;
}

Išvestis

3 būdas: slinkite iki elemento „JavaScript“, naudodami metodą „scrollTo()“.

„ slinkti į () ” metodas slenka nurodytu dokumentu iki priskirtų koordinačių. Šis metodas taip pat gali būti įgyvendintas norint gauti elementą naudojant jo ID ir atliekant reikiamas funkcijas, kad būtų galima slinkti konkretų vaizdą DOM.

Sintaksė

window.scrollTo ( x ir y )

Čia, ' x “ ir „ Y “ nurodykite x ir y koordinates.

Pažvelkite į toliau pateiktą pavyzdį.

Pavyzdys

Pirmiausia pakartokite anksčiau aptartus veiksmus, kad pridėtumėte antraštę, mygtuką su įvykiu „onclick“ ir vaizdą, kaip nurodyta toliau:

< h2 > Spustelėkite mygtuką, kad pereitumėte prie elemento. h2 >
< mygtuką paspaudus = 'scrollElement()' > Slinkties elementas mygtuką >
< br >
< img src = 'vaizdas.JPG' id = 'div' >

Tada apibrėžkite funkciją pavadinimu ' slinkties elementas () “ ir nustatykite slinktį iškviesdami Position() metodą scrollTo() metodu:

funkcija slinkties elementas ( ) {
window.scrollTo ( 0 , Padėtis ( document.getElementById ( 'div' ) ) ) ;
}

Galiausiai apibrėžkite funkciją pavadinimu Position() ir panašiai taikykite aukščiau aptartus veiksmus, kad nustatytumėte nurodyto vaizdo koordinates:

funkcija Padėtis ( obj ) {
kur srovės viršus = 0 ;
jeigu ( obj.offsetParent ) {
daryti {
currenttop += obj.offsetTop;
} kol ( ( obj = obj.offsetParent ) ) ;
grąžinti [ srovės viršus ] ;
}
}

Išvestis

Aptarėme visus patogius būdus slinkti prie elemento naudojant „JavaScript“.

Išvada

Norėdami pereiti prie elemento „JavaScript“, naudokite „ scrollIntoView() “ būdas pasiekti elementą ir pritaikyti nurodytą funkciją, „ window.scroll() “ būdas gauti elementą, nustatyti jo koordinates naudodami funkciją ir slinkti vaizdą arba naudoti „ slinkti į () “ metodą, kad gautumėte elementą ir atitinkamai slinktumėte. Šiame tinklaraštyje buvo parodyta idėja slinkti iki elemento naudojant „JavaScript“.