ScrollTo: примеры (JAVASCRIPT)

Примеры использования

Прокрутка к координатам

Мгновенный переход к точке 100px от левого края и 500px от верха:

window.scrollTo(100, 500);

// Окно прокручивается мгновенно.

Плавная прокрутка с объектом параметров

Плавное перемещение к началу страницы:

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

// Окно плавно возвращается к началу.

Прокрутка элемента

Плавная прокрутка контейнера с идентификатором 'myContainer' к позиции 300px по вертикали:

const container = document.getElementById('myContainer');
container.scrollTo({
  top: 300,
  behavior: 'smooth'
});

// Элемент плавно прокручивается.

Похожие методы JavaScript

• scrollBy(): Прокручивает окно или элемент на указанное количество пикселей относительно текущей позиции. Подходит для инкрементального перемещения.

  // Прокрутка вниз на 200px
  window.scrollBy(0, 200);

• scrollIntoView(): Вызывается у DOM-элемента, прокручивает родительский контейнер, чтобы сделать элемент видимым. Удобен для навигации к конкретным блокам без вычисления координат.

  document.getElementById('section2').scrollIntoView({
    behavior: 'smooth',
    block: 'start'
  });

• scroll() и scrollTo(): Методы scroll() и scrollTo() идентичны по функционалу и аргументам.

Выбор метода зависит от задачи: scrollTo — для абсолютных координат, scrollBy — для относительного смещения, scrollIntoView — для привязки к элементу.

Типичные ошибки

Неправильный контекст вызова

Вызов scrollTo у элемента, который не поддерживает прокрутку.

// Элемент без overflow
const span = document.querySelector('span');
span.scrollTo(0, 100); // Ошибки не будет, но прокрутки не произойдет.

// Ничего не происходит.

Невалидные значения параметров

Передача нечисловых значений в координаты или неверных опций.

window.scrollTo('100px', 'abc'); // Координаты будут преобразованы в числа
window.scrollTo({ top: 100, behavior: 'fast' }); // Некорректное значение behavior

// В первом случае: 'abc' станет NaN, прокрутка не сработает.
// Во втором: behavior будет проигнорирован, прокрутка мгновенная.

Ожидание возвращаемого значения

Метод возвращает undefined, попытка использовать результат вызовет ошибку.

const pos = window.scrollTo(0, 0);
console.log(pos); // undefined

История изменений

Метод scrollTo() существовал в JavaScript давно, но важное обновление было внесено с появлением поддержки объекта параметров и плавной прокрутки.

• Объект параметров с полями top, left, behavior был стандартизирован в спецификации CSSOM View Module. Поддержка значения 'smooth' для behavior зависит от браузера и его версии.
• Современные браузеры (Chrome 61+, Firefox 36+, Safari 10.1+) поддерживают плавную прокрутку. В старых браузерах значение 'smooth' игнорируется, прокрутка происходит мгновенно.
• Метод element.scrollTo() для прокрутки отдельных элементов стал широко поддерживаться одновременно с window.scrollTo().

Расширенные примеры

Прокрутка к элементу с вычислением позиции

Прокрутка к определенному элементу страницы с вычислением его координат.

function scrollToElement(elementId) {
  const element = document.getElementById(elementId);
  if (element) {
    const rect = element.getBoundingClientRect();
    window.scrollTo({
      top: rect.top + window.pageYOffset,
      left: rect.left + window.pageXOffset,
      behavior: 'smooth'
    });
  }
}
scrollToElement('footer');

// Плавная прокрутка к элементу с id='footer'.

Последовательная анимированная прокрутка

Создание цепочки плавных прокруток для пошагового отображения контента.

const positions = [0, 500, 1000, 0];
let index = 0;

function scrollNext() {
  if (index < positions.length) {
    window.scrollTo({ top: positions[index], behavior: 'smooth' });
    index++;
    setTimeout(scrollNext, 1000); // Задержка 1 секунда
  }
}
scrollNext();

// Окно плавно прокручивается до позиций 0, 500, 1000, 0 с интервалом.

Прокрутка с учетом фиксированной шапки

Компенсация высоты фиксированного заголовка при прокрутке к якорю.

const headerHeight = 80;

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function(e) {
    e.preventDefault();
    const targetId = this.getAttribute('href').substring(1);
    const targetElement = document.getElementById(targetId);
    if (targetElement) {
      const targetPosition = targetElement.offsetTop - headerHeight;
      window.scrollTo({
        top: targetPosition,
        behavior: 'smooth'
      });
    }
  });
});

// При клике на якорную ссылку прокрутка происходит с учетом высоты шапки.

Горизонтальная прокрутка элемента

Использование метода для горизонтального скролла контейнера.

const slider = document.querySelector('.horizontal-slider');
// Прокрутка на 300px вправо
slider.scrollTo({
  left: 300,
  behavior: 'smooth'
});

// Горизонтальный контейнер плавно сдвигается.

Аналоги в других языках

Прямых аналогов scrollTo в серверных языках (PHP, Python, MySQL, C) нет, так как прокрутка — это клиентская операция в браузере. Однако существуют библиотеки и инструменты для автоматизации браузера, которые могут эмулировать подобные действия.

Python с Selenium

Библиотека Selenium WebDriver позволяет выполнять скрипты в браузере, включая прокрутку через JavaScript.

from selenium import webdriver

driver = webdriver.Chrome()
driver.get('https://example.com')
# Прокрутка через выполнение JS
driver.execute_script('window.scrollTo(0, 1000);')

# Браузер прокручивается на 1000px вниз.

PHP с Panther

Библиотека Panther предоставляет аналогичный Selenium функционал для PHP.

<?php
use Symfony\Component\Panther\Client;

$client = Client::createChromeClient();
$crawler = $client->request('GET', 'https://example.com');
$client->executeScript('window.scrollTo(0, document.body.scrollHeight);');

// Страница прокручивается до конца.

Отличие: эти методы не являются встроенными в язык, а используют внешние инструменты для управления браузером.