Hur man rullar till ett element med hjälp av JavaScript

När du surfar på webbsidorna håller rullning till ett element användaren fokuserad genom att fånga deras uppmärksamhet under en lång period. Den här funktionen kan tillämpas när en användare behöver rulla med ett enda klick eller, i fallet med automationstestning, för att direkt kontrollera det tillagda innehållet längst ned på sidan. I sådana scenarier lägger rullning till ett element i JavaScript till funktionalitet som kan tillämpas med ett enda klick utan mycket användarinteraktion och sparar tid.

Den här manualen hjälper dig att rulla till ett element med hjälp av JavaScript.

Hur rullar man till ett element med hjälp av JavaScript?

För att rulla till ett element med JavaScript kan du använda:

• • ' scrollIntoView() 'metoden
  • ' skrolla() 'metoden
  • ' scrollTo() 'metoden

De nämnda tillvägagångssätten kommer att illustreras en efter en!

Metod 1: Bläddra till ett element i JavaScript med metoden scrollIntoView().

den ' scrollIntoView() ”-metoden rullar ett element till det synliga området i Document Object Model(DOM). Denna metod kan tillämpas för att hämta den specificerade HTML-koden och tillämpa den specifika metoden på den med hjälp av onclick-händelsen.

Syntax

I den givna syntaxen ' justera ” indikerar inriktningstypen.

Exempel

I följande exempel, lägg till följande rubrik med hjälp av '

' tag:

< h2 > Klicka på knappen för att rulla till elementet. h2 >

Skapa nu en knapp med en ' onclick ' händelse som anropar funktionen ' scrollElement() :

< knapp onclick = 'scrollElement()' > Scroll Element knapp >
< br >

Efter det, ange bildkällan och dess id för att rullas:

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

Slutligen, definiera en funktion som heter ' scrollElement() ' som kommer att hämta det nödvändiga elementet med hjälp av ' document.getElementById() ”-metoden och använd metoden scrollIntoView() på den för att rulla bilden:

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

CSS-kod

I CSS-koden, tillämpa följande dimensioner för att justera bildstorleken genom att referera till bild-id ' div ”:

#div{
höjd: 800px;
bredd: 1200px;
overflow: auto;
}

Motsvarande utgång kommer att vara:

Metod 2: Bläddra till ett element i JavaScript med metoden window.scroll().

den ' window.scroll() ”-metoden rullar fönstret enligt koordinatvärdena i dokumentet. Denna metod kan implementeras för att hämta bild-id, ställa in dess koordinater med en funktion och rulla den angivna bilden.

Syntax

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

I ovanstående syntax, ' x-coord ' hänvisar till X-koordinater, och ' y-kord ” indikerar Y-koordinaterna.

Följande exempel förklarar det angivna konceptet.

Exempel

Upprepa samma steg för att lägga till rubriken, skapa en knapp, tillämpa onclick-händelsen och ange bildkällan med dess id:

< h2 > Klicka på knappen för att rulla till elementet. h2 >
< knapp onclick = 'scrollElement()' > Scroll Element knapp >
< br >
< bild src = 'image.PNG' id = 'div' >

Definiera sedan en funktion som heter ' scrollElement() ”. Här kommer vi att justera koordinaterna med hjälp av ' window.scroll() '-metoden genom att komma åt funktionen som heter ' Placera() ” och applicera det på det hämtade bildelementet:

fungera scrollElement ( ) {
window.scroll ( 0 , Position ( document.getElementById ( 'div' ) ) ) ;
}

Efter det, definiera en funktion som heter ' Placera() ” tar ett variabelt objekt som argument. Använd också ' offsetFörälder ” egendom, som kommer att komma åt närmaste förfader som inte har en statisk position och returnera den. Öka sedan det initierade nuvarande toppvärdet med hjälp av ' offsetTopp ' egenskap som returnerar toppositionen med avseende på föräldern (offsetParent) och returnerar värdet på ' nuvarande topp ” när det tillagda villkoret utvärderas som sant:

fungera Placera ( obj ) {
 var currenttop = 0 ;
om ( obj.offsetFörälder ) {
do {
aktuelltopp += obj.offsetTop;
} medan ( ( obj = obj.offsetParent ) ) ;
lämna tillbaka [ nuvarande topp ] ;
}
}

Till sist, utforma den skapade behållaren enligt dina krav:

#div{
höjd: 1000px;
bredd: 1000px;
overflow: auto;
}

Produktion

Metod 3: Bläddra till ett element i JavaScript med metoden scrollTo().

den ' scrollTo() ”-metoden rullar det angivna dokumentet till tilldelade koordinater. Denna metod kan på liknande sätt implementeras för att få elementet genom att använda dess id och utföra den nödvändiga funktionaliteten för att rulla den specifika bilden på DOM.

Syntax

window.scrollTo ( x och y )

Här, ' x ' och ' Y ” peka på x- och y-koordinaterna.

Ta en titt på följande exempel.

Exempel

Upprepa först stegen som diskuterats ovan för att lägga till en rubrik, knapp med en onclick-händelse och bild enligt följande:

< h2 > Klicka på knappen för att rulla till elementet. h2 >
< knapp onclick = 'scrollElement()' > Scroll Element knapp >
< br >
< img src = 'image.JPG' id = 'div' >

Definiera sedan en funktion som heter ' scrollElement() ” och ställ in rullningen genom att anropa Position()-metoden i scrollTo()-metoden:

fungera scrollElement ( ) {
window.scrollTo ( 0 , Position ( document.getElementById ( 'div' ) ) ) ;
}

Definiera sist en funktion som heter Position() och tillämpa på liknande sätt de ovan diskuterade stegen för att ställa in koordinaterna för den angivna bilden:

fungera Placera ( obj ) {
 var currenttop = 0 ;
om ( obj.offsetFörälder ) {
do {
aktuelltopp += obj.offsetTop;
} medan ( ( obj = obj.offsetParent ) ) ;
lämna tillbaka [ nuvarande topp ] ;
}
}

Produktion

Vi har diskuterat alla praktiska metoder för att scrolla till ett element med hjälp av JavaScript.

Slutsats

För att rulla till ett element i JavaScript, använd ' scrollIntoView() ”-metoden för att komma åt elementet och tillämpa den specificerade funktionaliteten, window.scroll() ”-metoden för att hämta elementet, ställa in dess koordinater med hjälp av en funktion och rulla bilden, eller använda ” scrollTo() ”-metoden för att hämta elementet och rulla det därefter. Den här bloggen demonstrerade konceptet att rulla till ett element med hjälp av JavaScript.