css.in.ua
Підтримати

JS метод Object.scrollTo()

Загальний опис

scrollTo() - це метод об'єкта Window в мові програмування JavaScript, призначений для програмної прокрутки вікна до вказаної позиції на веб-сторінці. Його основна функціональність полягає в тому, щоб забезпечити можливість точного визначення положення перегляду сторінки, що може бути корисним при розробці адаптивних та інтерактивних веб-додатків.

scrollTo() використовується для того, щоб змінити поточне положення прокрутки вікна на вказану координату в пікселях. Це забезпечує точний і гнучкий контроль над прокруткою сторінки, що дозволяє створювати веб-додатки з вишуканим та інтуїтивно зрозумілим інтерфейсом.

Застосування на практиці: Почнемо з простого прикладу використання scrollTo() для прокрутки вгору на початок сторінки:

// Прокрутити на початок сторінки
window.scrollTo(0, 0);

У цьому прикладі scrollTo(0, 0) вказує, що вікно має бути прокручено до верхнього лівого кута сторінки. Подібно до цього, можна використовувати scrollTo(x, y), де x та y - це координати в пікселях, для прокрутки до конкретної позиції.

Далі розглянемо сценарій використання scrollTo() при натисканні на кнопку:

// Прокрутити до елементу з id="targetElement" при кліку на кнопку з id="scrollButton"
var scrollButton = document.getElementById('scrollButton');
var targetElement = document.getElementById('targetElement');

scrollButton.addEventListener('click', function() {
    targetElement.scrollIntoView({ behavior: 'smooth' });
});

У цьому випадку, коли користувач клікає на кнопку з ідентифікатором scrollButton, сторінка плавно прокручується до елемента з ідентифікатором targetElement. Використання scrollIntoView() з параметром { behavior: 'smooth' } забезпечує плавну анімацію прокрутки до цільового елемента.

Також, можна використовувати scrollTo() для реалізації динамічної анімації при прокручуванні сторінки. Розглянемо приклад, де прокрутка змінює прозорість фонового зображення:

// Змінити прозорість фонового зображення в залежності від значення прокрутки
window.addEventListener('scroll', function() {
    var scrollPosition = window.scrollY;
    var backgroundImage = document.getElementById('backgroundImage');

    // Застосувати ефект анімації на основі значення прокрутки
    backgroundImage.style.opacity = 1 - scrollPosition / 500;
});

У цьому прикладі, якщо користувач прокручує сторінку, прозорість фонового зображення змінюється в залежності від значення прокрутки, створюючи ефект анімації.

Використовуючи scrollTo(), розробники можуть створювати динамічні та інтерактивні веб-додатки, покращуючи користувацький досвід та надаючи точний контроль над прокруткою вікна.

Порада:

Використовуйте scrollTo() для створення плавних переходів на сторінці, встановлюючи абсолютні координати. Наприклад:

window.scrollTo({
  top: 0,
  left: 0,
  behavior: 'smooth'
});
Порада:

Використовуйте метод для реагування на розмір екрану, автоматично коригуючи положення прокрутки. Це покращить взаємодію з різними пристроями.
Порада:

Використовуйте ID елементів як міток для scrollTo(). При кліці на елементи навігації викликайте метод, щоб плавно прокрутити до відповідних секцій.
Порада:

Зручно використовувати scrollTo() для автоматичної прокрутки до кінця документу під час завантаження сторінки:

window.onload = function() {
  window.scrollTo(0, document.body.scrollHeight);
};

Синтаксис

scrollTo(x-coord, y-coord)
scrollTo(options)

Параметри

*options

Об'єкт, що містить наступні параметри:

  • top (необов'язковий): Вертикальна координата, до якої потрібно прокрутити вміст вікна.
  • left (необов'язковий): Горизонтальна координата, до якої потрібно прокрутити вміст вікна.
  • behavior (необов'язковий): Режим прокрутки, який може бути "auto", "instant" або "smooth".

Return

none

Повертає undefined.

Переглядачі

Переглядач

1

1

1

4

12
Переглядач

4.4

18

4

1
Переглядач

-

-

Приклади


У цьому прикладі ви бачите кнопку "Прокрутити вгору", яка використовуэ метод scrollTo() для плавної прокрутки до верху вмісту вікна.

У цьому прикладі ми використовуємо метод scrollTo() для автоматичної прокрутки сторінки до верхнього краю вказаного елемента (з id targetElement) при завантаженні сторінки. Параметр behavior: 'smooth' додає плавну анімацію прокрутки.

// Отримання елемента, до якого потрібно прокрутити
const targetElement = document.getElementById('targetElement');

// Використання scrollTo() для прокрутки до верхнього краю цільового елемента
window.scrollTo({
  top: targetElement.offsetTop,
  left: 0,
  behavior: 'smooth' // Додає плавну анімацію
});

У цьому прикладі ми створюємо кнопку, і при кліці на неї викликається функція scrollToTop(), яка використовує метод scrollTo() для плавної прокрутки до верхньої частини сторінки.

// Функція, яка викликається при кліці на кнопку "Прокрутити вгору"
function scrollToTop() {
  // Використання scrollTo() для прокрутки до верхньої частини сторінки
  window.scrollTo({
    top: 0,
    left: 0,
    behavior: 'smooth' // Додає плавну анімацію
  });
}

// Додавання обробника подій до кнопки
document.getElementById('scrollToTopButton').addEventListener('click', scrollToTop);

Спільнота

Зв'язок