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(x-coord, y-coord)
scrollTo(options)

Параметри

*options

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

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

Return

none

Повертає undefined.

Переглядачі

• Стаціонарні переглядачі
• Мобільні переглядачі
• Серверні переглядачі

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

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

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

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

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