window.scrollTo() в JavaScript — прокрутити сторінку

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

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({ top: 0, behavior: 'smooth' }). Саме behavior і робить прокрутку плавною — без жодних бібліотек і анімацій вручну.

Стара форма з двома числами (scrollTo(0, 0)) теж працює, але прокручує миттєво, ривком.

Щоб прокрутити до конкретного елемента, зручніше element.scrollIntoView({ behavior: 'smooth', block: 'center' }) — не треба рахувати координати.

правити

Порада

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

автор: 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.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);

<header>
  <h2 class="title">Window: scrollTo() method</h2>
  <p class="description">Цей метод прокручує вміст вікна до вказаних координат.</p>
</header>

<main>
  <div class="result" id="result">
    <p>Прокрутка вмісту</p>
    <div class="scroll-box" id="scrollBox">Lorem ipsum dolor sit amet...</div>
    <button onclick="scrollToTop()">Прокрутити вгору</button>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

button {
  margin: 5px;
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
}

.scroll-box {
  height: 400px;
  overflow-y: scroll;
  border: 1px solid #ccc;
  margin-bottom: 20px;
}

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

}
//# sourceURL=pen.js

<button id="top">Нагору</button>
<div style="height:150vh"></div>
<h2 id="target">Розділ</h2>

document.getElementById('top').addEventListener('click', () => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
});

// до конкретного елемента — без рахування координат
document.getElementById('target').scrollIntoView({
    behavior: 'smooth',
    block: 'center',
});

// стара форма — миттєво, ривком
// window.scrollTo(0, 0);