Naar een element scrollen met JavaScript

Naar een element scrollen in JavaScript

JavaScript naar element scrollen: scrollIntoView-opties live | We.Inc

Probeer elke scrollIntoView-optie in een live vak, los koppen op die onder een sticky header verdwijnen met scroll-margin-top, en kopieer smooth scroll-code in JavaScript en gewone CSS.

Roep element.scrollIntoView({ behavior: 'smooth', block: 'start' }) aan om een element in beeld te brengen. block bepaalt waar het verticaal terechtkomt: start, center, end of nearest. Als een sticky header het doel bedekt, geef het doel dan in CSS een scroll-margin-top gelijk aan de hoogte van de header, in plaats van offsets in JavaScript te berekenen.

Opties van scrollIntoView

Optie
Waarden
Standaard

"smooth", "instant", "auto" (volgt CSS scroll-behavior)
"auto"

block (verticaal)
"start", "center", "end", "nearest"
"start"

inline (horizontaal)
"start", "center", "end", "nearest"
"nearest"

true / false in plaats van opties
true = block start, false = block end (inline nearest)

Er zijn drie manieren om de pagina naar een element te verplaatsen: scrollIntoView op het element, scrollTo met een pixelpositie, en een gewone link naar een id. De speeltuin laat zien wat elke block-waarde doet en hoe scroll-margin-top een kop vrijhoudt van een vaste balk, en de voorbeelden daarna behandelen de code die u nodig hebt voor menu's, formulierfouten en lijsten in chatstijl.

Kies een doelrij en een block-waarde en druk op Scrollen. Alleen het demovak beweegt, dus deze pagina blijft staan.
Verhoog de scroll margin tot de hoogte van de grijze sticky balk en zie het doel er net onder stoppen.
Wissel behavior tussen smooth en instant om de twee te vergelijken.
Kopieer de gegenereerde scrollIntoView-aanroep en de CSS-regel voor uw eigen pagina.

scroll-margin-top geldt ook als iemand een link naar #section opent, dus één CSS-regel lost zowel klikken als gedeelde URL's op.
Gebruik block: 'nearest' voor toetsenbordnavigatie door een lijst. Het scrolt alleen zo ver als nodig en doet niets als het item al zichtbaar is.
Smooth scrollen over een lange pagina kan traag aanvoelen. Zet html { scroll-behavior: smooth } in een media query prefers-reduced-motion: no-preference, zodat mensen die om minder beweging vragen direct verspringen.
scrollIntoView verplaatst elke scrollbare voorouder, inclusief de pagina. Als alleen een binnenpaneel moet bewegen, stel dan de scrollTop van dat paneel in of roep panel.scrollTo aan.

Veelgestelde vragen

Hoe scroll ik naar een element met een offset voor een vaste header?

Voeg scroll-margin-top toe aan het doel, bijvoorbeeld h2 { scroll-margin-top: 80px }. De CSS scroll snap-specificatie vraagt browsers die marge te respecteren voor scrollIntoView en voor links naar #ids, ook als er geen snapping wordt gebruikt.

Hoe maak ik scrollen vloeiend?

Geef behavior: 'smooth' mee aan scrollIntoView of scrollTo, of stel scroll-behavior: smooth in op het html-element zodat elke scroll vanuit code en elke link binnen de pagina wordt geanimeerd. scroll-behavior heeft geen effect op scrollen dat de gebruiker zelf doet met een muiswiel of touch.

Wat is het verschil tussen scrollIntoView en scrollTo?

scrollIntoView werkt vanuit een element en berekent de positie voor u. window.scrollTo({ top, behavior }) gaat naar een exacte pixelpositie, en scrollBy verplaatst met een relatieve afstand. Gebruik scrollTo als u al een getal hebt, bijvoorbeeld om terug te keren naar een opgeslagen positie.

Hoe scroll ik naar de bovenkant van de pagina?

window.scrollTo({ top: 0, behavior: 'smooth' }). Roep voor een scrollbaar paneel dezelfde methode aan op het paneelelement in plaats van op window.

Waarom doet scrollIntoView niets?

Veelvoorkomende oorzaken zijn het aanroepen voordat het element bestaat (voer het uit na het renderen, bijvoorbeeld in een React-effect), een element met display: none, of de optie nearest bij een element dat al volledig zichtbaar is.

Een block-waarde kiezen

start past bij sprongen naar een sectie of kop, omdat de lezer bovenaan begint. center werkt goed om de aandacht op één veld te vestigen, zoals het eerste ongeldige veld in een formulier. end past bij een chat of log waarin het nieuwste item onderaan moet staan.
nearest is de beleefde optie: die verplaatst zo weinig als nodig en laat zichtbare items met rust, en dat wilt u wanneer een pijltoets de markering door een lijst verplaatst.

Het zonder JavaScript doen

Een gewone link zoals <a href="#pricing"> scrolt al naar het element met id pricing, werkt de adresbalk bij en werkt met de terugknop. Voeg scroll-behavior: smooth toe aan het html-element en scroll-margin-top aan de doelen, en veel inhoudsopgaven hebben helemaal geen script nodig.
Gebruik JavaScript wanneer het scrollen volgt op iets anders dan een klik op een link: een formulier dat niet door de validatie komt, een nieuw bericht dat binnenkomt of een zoekresultaat dat wordt geselecteerd.

Code om naar een element te scrollen

Vloeiend naar een sectie scrollen

Zoekt het element op via id en brengt de bovenrand naar de bovenkant van het beeld.

Offset voor een sticky header in CSS

Eén regel lost de overlap op voor scrolls vanuit code en voor links die eindigen op #id. De media query slaat de animatie over voor mensen die liever minder beweging zien.

Het eerste ongeldige veld in beeld brengen

center houdt het veld en het label in het midden van het scherm; focus brengt toetsenbordgebruikers er ook naartoe.

Alleen binnen een paneel scrollen

Gebruikt de positie van het item binnen het paneel, zodat de pagina eromheen niet beweegt.

React: naar een ref scrollen

De ref wijst naar de DOM-node zodra die is gerenderd, dus de aanroep gebeurt in een klikhandler of een effect.

scrollIntoView-speeltuin

Dit vak heeft een eigen sticky balk. Kies een rij en opties en scrol. Het vak past dezelfde uitlijningsberekening toe met scrollTo, zodat de rest van de pagina stil blijft staan.

Doelrij: {n}

scroll-margin-top: {n}px

Scrollen

Terug naar bovenkant van het vak

Sticky balk, 40px hoog

Rij {n}

Demo-scrollvak

Code voor uw pagina

Gratis beginnen · Geen creditcard nodig

Gerelateerd: Gidsen

Product

Voor wie

Functies

Bronnen

Bedrijf

Sitemap