Scorrere fino a un elemento con JavaScript

Scorrere fino a un elemento in JavaScript

Scroll a un elemento in JavaScript: opzioni di scrollIntoView dal vivo | We.Inc

Prova ogni opzione di scrollIntoView in un box dal vivo, sistema i titoli nascosti sotto un header sticky con scroll-margin-top e copia il codice per lo scroll fluido in JavaScript e in CSS puro.

Chiama element.scrollIntoView({ behavior: 'smooth', block: 'start' }) per portare un elemento nella vista. block decide dove si posiziona in verticale: start, center, end o nearest. Se un header sticky copre il target, dai al target uno scroll-margin-top pari all'altezza dell'header in CSS invece di calcolare gli offset in JavaScript.

Opzioni di scrollIntoView

Opzione
Valori
Predefinito

"smooth", "instant", "auto" (segue scroll-behavior del CSS)
"auto"

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

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

true / false al posto delle opzioni
true = block start, false = block end (inline nearest)

Ci sono tre modi per spostare la pagina fino a un elemento: scrollIntoView sull'elemento, scrollTo con una posizione in pixel, e un semplice link a un id. Il playground mostra cosa fa ogni valore di block e come scroll-margin-top tiene un titolo lontano da una barra fissa, poi gli esempi coprono il codice che ti serve per menu, errori nei moduli e liste in stile chat.

Scegli una riga di destinazione e un valore di block, poi premi Scorri. Si muove solo il box demo, quindi questa pagina resta ferma.
Aumenta il margine di scroll fino all'altezza della barra sticky grigia e guarda il target fermarsi appena sotto.
Cambia behavior tra smooth e instant per confrontarli.
Copia la chiamata scrollIntoView e la regola CSS generate per la tua pagina.

scroll-margin-top si applica anche quando qualcuno apre un link a #section, quindi una sola regola CSS sistema sia i clic sia gli URL condivisi.
Usa block: 'nearest' per la navigazione da tastiera in una lista. Scorre solo quanto serve e non fa nulla se l'elemento è già visibile.
Lo scroll fluido su una pagina lunga può sembrare lento. Racchiudi html { scroll-behavior: smooth } in una media query prefers-reduced-motion: no-preference così chi chiede meno movimento ottiene salti istantanei.
scrollIntoView muove ogni antenato scorrevole, pagina compresa. Quando deve muoversi solo un pannello interno, imposta lo scrollTop di quel pannello o chiama invece panel.scrollTo.

Domande frequenti

Come scorro fino a un elemento con un offset per un header fisso?

Aggiungi scroll-margin-top al target, per esempio h2 { scroll-margin-top: 80px }. La specifica CSS scroll snap chiede ai browser di rispettare quel margine per scrollIntoView e per i link a #id, anche senza alcuno snap in uso.

Come rendo fluido lo scroll?

Passa behavior: 'smooth' a scrollIntoView o scrollTo, oppure imposta scroll-behavior: smooth sull'elemento html così ogni scroll da codice e ogni link interno alla pagina è animato. scroll-behavior non ha effetto sullo scroll fatto dall'utente con la rotella o il tocco.

Qual è la differenza tra scrollIntoView e scrollTo?

scrollIntoView parte da un elemento e calcola la posizione per te. window.scrollTo({ top, behavior }) si sposta a una posizione esatta in pixel, e scrollBy si sposta di una quantità relativa. Usa scrollTo quando hai già un numero, per esempio per tornare a una posizione salvata.

Come scorro in cima alla pagina?

window.scrollTo({ top: 0, behavior: 'smooth' }). Per un pannello scorrevole, chiama lo stesso metodo sull'elemento del pannello invece che su window.

Perché scrollIntoView non fa nulla?

Le cause comuni sono chiamarlo prima che l'elemento esista (eseguilo dopo il rendering, per esempio in un effect di React), l'elemento che ha display: none, oppure l'opzione nearest con un elemento già completamente visibile.

Scegliere un valore di block

start è adatto ai salti verso una sezione o un titolo, perché il lettore comincia dall'inizio. center funziona bene per attirare l'attenzione su un singolo campo, come il primo input non valido di un modulo. end va bene per una chat o un log in cui l'elemento più recente deve stare in fondo.
nearest è l'opzione discreta: si sposta della distanza minima necessaria e lascia stare gli elementi visibili, ed è ciò che vuoi quando un tasto freccia sposta l'evidenziazione in una lista.

Farlo senza JavaScript

Un normale link come <a href="#pricing"> scorre già fino all'elemento con id pricing, aggiorna la barra degli indirizzi e funziona con il pulsante indietro. Aggiungi scroll-behavior: smooth all'elemento html e scroll-margin-top ai target, e molti menu di indice non hanno bisogno di alcuno script.
Ricorri a JavaScript quando lo scroll segue qualcosa che non è un clic su un link: un modulo che non supera la validazione, un nuovo messaggio in arrivo o un risultato di ricerca selezionato.

Codice per scorrere fino a un elemento

Scroll fluido fino a una sezione

Cerca l'elemento per id e porta il suo bordo superiore in cima alla vista.

Offset per l'header sticky in CSS

Una sola regola risolve la sovrapposizione per gli scroll da script e per i link che finiscono con #id. La media query salta l'animazione per chi preferisce meno movimento.

Portare in vista il primo campo non valido

center tiene il campo e la sua etichetta al centro dello schermo; il focus porta lì anche chi usa la tastiera.

Scorrere solo dentro un pannello

Usa la posizione dell'elemento dentro il pannello, così la pagina attorno non si muove.

React: scorrere fino a un ref

Il ref punta al nodo DOM una volta renderizzato, quindi la chiamata avviene in un gestore di clic o in un effect.

Playground di scrollIntoView

Questo box ha la sua barra sticky. Scegli una riga e le opzioni, poi scorri. Il box applica gli stessi calcoli di allineamento con scrollTo, così il resto della pagina resta fermo.

Riga di destinazione: {n}

scroll-margin-top: {n}px

Scorri

Torna in cima al box

Barra sticky, alta 40px

Riga {n}

Box di scroll dimostrativo

Codice per la tua pagina

Inizia gratis · Nessuna carta di credito richiesta

Correlati: Guide

Prodotto

Per chi è

Funzionalità

Risorse

Azienda

Mappa del sito