window.scrollTo / scrollBy în JavaScript

window.scrollTo({ top: 0, behavior: "smooth" })
window.scrollBy({ top: 400, behavior: "smooth" })
element.scrollTo(...)
element.scrollBy(...)

Ce face window.scrollTo / scrollBy

scrollTo derulează la o poziție absolută, iar scrollBy cu o distanță față de poziția curentă. Primesc fie două numere (x, y), fie un obiect cu top, left și behavior: "smooth" pentru animație.

Aceleași metode există pe orice element cu conținut derulabil (de exemplu o listă cu overflow: auto). Poziția curentă a paginii este în window.scrollY, iar a unui element în element.scrollTop.

Parametri

Parametru	Descriere
optiuni	{ top, left, behavior } sau coordonatele x, y.

Ce returnează

undefined.

Exemple

Exemplul 1: Butonul „Înapoi sus”

const sus = document.querySelector("#inapoi-sus");

window.addEventListener("scroll", () => {
  sus.hidden = window.scrollY < 600;
});
sus.addEventListener("click", () => {
  window.scrollTo({ top: 0, behavior: "smooth" });
  console.log("derulez sus de la", Math.round(window.scrollY));
});

Rezultat în browser

derulez sus de la 2350

Exemplul 2: Un carusel derulat cu săgeți

const carusel = document.querySelector(".carusel");

document.querySelector(".inainte").addEventListener("click", () => {
  carusel.scrollBy({ left: carusel.clientWidth, behavior: "smooth" });
});
document.querySelector(".inapoi").addEventListener("click", () => {
  carusel.scrollTo({ left: 0, behavior: "smooth" });
});

Greșeli frecvente

• Ascultătorul de scroll face calcule grele. Evenimentul vine de zeci de ori pe secundă; folosește IntersectionObserver sau limitează cu requestAnimationFrame.

Comenzi înrudite

• Element.scrollIntoView: Derulează pagina (sau containerul) astfel încât elementul să devină vizibil.
• requestAnimationFrame: Rulează o funcție chiar înainte de următoarea redesenare a ecranului; baza animațiilor fluide.
• IntersectionObserver: Anunță când un element intră sau iese din zona vizibilă: încărcare leneșă, animații la derulare, derulare infinită.