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(), розробники можуть створювати динамічні та інтерактивні веб-додатки, покращуючи користувацький досвід та надаючи точний контроль над прокруткою вікна.

правити

Порада

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

автор: Bond правити

Порада

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

автор: Bond правити

Порада

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

window.scrollTo({
  top: 0,
  left: 0,
  behavior: 'smooth'
});

автор: Bond правити

Порада

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

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

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

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

Параметри

options

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

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

автор: Bond

правити

Повернення

none

Повертає undefined.

автор: Bond

правити

Переглядачі

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

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	4	12

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Підтримка: серверні переглядачі

Переглядач
	-	-

Приклади

+ запропонувати свій приклад у пісочниці

<div id="targetElement">Демонстраційний елемент</div>

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

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

<button id="scrollToTopButton">Прокрутити</button>

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

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