Naar een element scrollen met JavaScript

Tijdens het surfen door de webpagina's houdt het scrollen naar een element de gebruiker gefocust door zijn aandacht voor een lange periode vast te houden. Deze functionaliteit kan worden toegepast wanneer een gebruiker moet scrollen met slechts een enkele klik of, in het geval van automatiseringstests, om de toegevoegde inhoud onderaan de pagina onmiddellijk te controleren. In dergelijke scenario's voegt het scrollen naar een element in JavaScript functionaliteit toe die met een enkele klik kan worden toegepast zonder veel gebruikersinteractie en bespaart het tijd.

Deze handleiding helpt u om met JavaScript naar een element te scrollen.

Hoe te scrollen naar een element met JavaScript?

Om met JavaScript naar een element te scrollen, kunt u het volgende gebruiken:

• • “ scrollIntoView() ” methode
  • “ rol() ” methode
  • “ scrollNaar() ” methode

De genoemde benaderingen worden één voor één geïllustreerd!

Methode 1: Scroll naar een element in JavaScript met de methode scrollIntoView()

De ' scrollIntoView() ”-methode schuift een element in het zichtbare gebied van het Document Object Model (DOM). Deze methode kan worden toegepast om de gespecificeerde HTML op te halen en de specifieke methode daarop toe te passen met behulp van de onclick-gebeurtenis.

Syntaxis

In de gegeven syntaxis, ' uitlijnen ” geeft het uitlijningstype aan.

Voorbeeld

Voeg in het volgende voorbeeld de volgende kop toe met behulp van de '

' label:

< h2 > Klik op de knop om naar het element te scrollen. h2 >

Maak nu een knop met een ' bij klikken ” gebeurtenis die de functie oproept “ scrollElement() :

< knop bij klikken = 'scrollElement()' > Scrollelement knop >
< br >

Geef daarna de afbeeldingsbron en de bijbehorende id op om te kunnen scrollen:

< afbeelding src = 'review.png' ID kaart = 'div' >

Definieer ten slotte een functie met de naam ' scrollElement() ' die het vereiste element zal ophalen met behulp van de ' document.getElementById() ” en pas de methode scrollIntoView() erop toe om door de afbeelding te bladeren:

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

CSS-code

Pas in de CSS-code de volgende afmetingen toe voor het aanpassen van de afbeeldingsgrootte door te verwijzen naar de afbeeldings-ID ' div ”:

#div{
hoogte: 800px;
breedte: 1200px;
overloop: automatisch;
}

De bijbehorende uitvoer zal zijn:

Methode 2: Scroll naar een element in JavaScript met de methode window.scroll()

De ' venster.scroll() ”-methode scrolt door het venster volgens de coördinaatwaarden in het document. Deze methode kan worden geïmplementeerd om de afbeeldings-ID op te halen, de coördinaten in te stellen met behulp van een functie en door de opgegeven afbeelding te bladeren.

Syntaxis

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

In de bovenstaande syntaxis, ' x-coördinaat ” verwijst naar X-coördinaten, en “ y-coördinaat ” geeft de Y-coördinaten aan.

In het volgende voorbeeld wordt het genoemde concept uitgelegd.

Voorbeeld

Herhaal dezelfde stappen om de kop toe te voegen, een knop te maken, de onclick-gebeurtenis toe te passen en de afbeeldingsbron met zijn id op te geven:

< h2 > Klik op de knop om naar het element te scrollen. h2 >
< knop bij klikken = 'scrollElement()' > Scrollelement knop >
< br >
< afbeelding src = 'afbeelding.PNG' ID kaart = 'div' >

Definieer vervolgens een functie met de naam ' scrollElement() ”. Hier zullen we de coördinaten aanpassen met behulp van de ' venster.scroll() ” methode door toegang te krijgen tot de functie met de naam “ Positie() ” en toepassen op het opgehaalde afbeeldingselement:

functie scrollElement ( ) {
window.scroll ( 0 , Positie ( document.getElementById ( 'div' ) ) ) ;
}

Definieer daarna een functie met de naam ' Positie() ” met een variabele obj als argument. Pas ook de ' offsetOuder ” eigenschap, die toegang heeft tot de dichtstbijzijnde voorouder die geen statische positie heeft en deze retourneert. Verhoog vervolgens de geïnitialiseerde huidige topwaarde met behulp van de ' offsetTop ” eigenschap die de bovenste positie ten opzichte van de ouder (offsetParent) retourneert en de waarde van “ huidige top ” wanneer de toegevoegde voorwaarde als waar wordt beoordeeld:

functie Positie ( obj ) {
waar huidigetop = 0 ;
als ( obj.offsetParent ) {
doen {
huidigetop += obj.offsetTop;
} terwijl ( ( obj = obj.offsetParent ) ) ;
opbrengst [ huidige top ] ;
}
}

Stijl ten slotte de gemaakte container volgens uw vereisten:

#div{
hoogte: 1000px;
breedte: 1000px;
overloop: automatisch;
}

Uitgang:

Methode 3: Scroll naar een element in JavaScript met de methode scrollTo()

De ' scrollNaar() ”-methode scrolt het opgegeven document naar toegewezen coördinaten. Deze methode kan op dezelfde manier worden geïmplementeerd om het element te krijgen door zijn id te gebruiken en de vereiste functionaliteit uit te voeren om door de specifieke afbeelding op de DOM te scrollen.

Syntaxis

window.scrollTo ( x en y )

Hier, ' x ' en ' Y ” wijst naar de x- en y-coördinaten.

Kijk eens naar het volgende voorbeeld.

Voorbeeld

Herhaal eerst de hierboven besproken stappen voor het toevoegen van een kop, knop met een onclick-gebeurtenis en afbeelding als volgt:

< h2 > Klik op de knop om naar het element te scrollen. h2 >
< knop bij klikken = 'scrollElement()' > Scrollelement knop >
< br >
< img src = 'afbeelding.JPG' ID kaart = 'div' >

Definieer vervolgens een functie met de naam ' scrollElement() ” en stel de scroll in door de methode Position() in de methode scrollTo() aan te roepen:

functie scrollElement ( ) {
window.scrollTo ( 0 , Positie ( document.getElementById ( 'div' ) ) ) ;
}

Definieer als laatste een functie met de naam Position() en pas op dezelfde manier de hierboven besproken stappen toe voor het instellen van de coördinaten van de opgegeven afbeelding:

functie Positie ( obj ) {
waar huidigetop = 0 ;
als ( obj.offsetParent ) {
doen {
huidigetop += obj.offsetTop;
} terwijl ( ( obj = obj.offsetParent ) ) ;
opbrengst [ huidige top ] ;
}
}

Uitgang:

We hebben alle handige methoden besproken om met JavaScript naar een element te scrollen.

Conclusie

Om naar een element in JavaScript te scrollen, gebruikt u de ' scrollIntoView() ” methode om toegang te krijgen tot het element en de gespecificeerde functionaliteit toe te passen, de “ venster.scroll() ' om het element op te halen, de coördinaten in te stellen met behulp van een functie en door de afbeelding te bladeren, of gebruik de ' scrollNaar() ” om het element op te halen en dienovereenkomstig te scrollen. Deze blog demonstreerde het concept om met JavaScript naar een element te scrollen.