• Теория
  • Теория

Метод scrollTo

Мы сказали JavaScript показывать кнопку со стрелкой, если прокручено больше 200px. При клике на эту кнопку страница должна прокрутиться к началу. Пока этого не происходит. Как заставить страницу прокрутиться?

Используем метод scrollTo:

window.scrollTo(координата-Х, координата-Y);

Координата Х указывает, куда нужно прокрутить страницу по горизонтали, а координата Y — куда нужно прокрутить страницу по вертикали. Когда браузер выполнит инструкцию, указанная точка окажется в левом верхнем углу окна. Координаты задаются в пикселях, но указывать единицы измерения не нужно:

// Прокрутит страницу на 100px вправо и на 50px вниз
window.scrollTo(100, 50);
Как работает window.scrollTo(100, 50)

Если прокрутить страницу до указанных координат не получается, браузер прокрутит её так далеко, как сможет, но увеличивать страницу не будет. Если страница помещается в окно целиком и полосы прокрутки нет, то браузер проигнорирует эту инструкцию.

На новостном сайте, с которым мы работаем, нет горизонтальной прокрутки. Поэтому в координату Х мы запишем 0, а менять будем только координату Y.

Посмотрим, как работает метод scrollTo: скажем JavaScript сначала прокрутить страницу на 400px вниз, а после вернуть её к началу.

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Прокрутка и операторы» тренажёра «Знакомство с JavaScript» можно после регистрации и оформления подписки.