Element.scrollIntoView în JavaScript

element.scrollIntoView({ behavior: "smooth", block: "start" })

Ce face Element.scrollIntoView

scrollIntoView() derulează toți părinții care pot fi derulați, astfel încât elementul să ajungă în zona vizibilă. Fără parametri, elementul ajunge sus.

Cu un obiect de opțiuni alegi animația (behavior: "smooth") și poziția verticală (block: "start", "center", "end", "nearest") sau orizontală (inline). Un antet fix poate acoperi elementul; rezolvă cu CSS scroll-margin-top.

Parametri

Parametru	Descriere
optiuni	Opțional. behavior, block, inline (sau true/false pentru sus/jos).

Ce returnează

undefined.

Exemple

Exemplul 1: Primul câmp cu eroare

const primaEroare = document.querySelector(".camp.invalid");

if (primaEroare) {
  primaEroare.scrollIntoView({ behavior: "smooth", block: "center" });
  primaEroare.querySelector("input").focus({ preventScroll: true });
  console.log("derulat la", primaEroare.querySelector("label").textContent);
}

Rezultat în browser

derulat la Telefon

Greșeli frecvente

• Elementul ajunge ascuns sub un meniu fix din partea de sus. Adaugă în CSS scroll-margin-top egal cu înălțimea meniului.

Comenzi înrudite

• window.scrollTo / scrollBy: Derulează pagina (sau un element derulabil) la o poziție anume sau cu o anumită distanță.
• getBoundingClientRect / elementFromPoint: Returnează poziția și mărimea unui element pe ecran; elementFromPoint face invers, din coordonate în element.
• HTMLElement.focus / blur: Mută focusul tastaturii pe un element (focus) sau îl scoate de pe el (blur).