логотип PurpleSchool
логотип PurpleSchool

.scrollTo() в JavaScript

Автор

Дмитрий Нечаев

Метод .scrollTo() в JavaScript позволяет программно прокрутить страницу до указанных координат на оси X и Y. Этот метод полезен, когда нам нужно переместить пользователя к определенной части страницы или к какому-либо элементу. Давайте рассмотрим использование метода .scrollTo() с примерами.

Введение в .scrollTo()

Метод .scrollTo() вызывается на объекте window и прокручивает страницу до указанных координат. Он принимает два параметра: x - горизонтальная координата и y - вертикальная координата. Если значение параметра не указано, то оно остается неизменным.

Синтаксис метода .scrollTo() выглядит следующим образом:

window.scrollTo(x, y);

Где:

  • x
    • горизонтальная координата, к которой нужно прокрутить страницу.
  • y
    • вертикальная координата, к которой нужно прокрутить страницу.

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

Давайте рассмотрим несколько примеров использования метода .scrollTo() для прокрутки страницы до указанных точек.

1. Прокрутка до верхнего левого угла страницы

window.scrollTo(0, 0);

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

2. Прокрутка до определенных координат

window.scrollTo(500, 1000);

Этот пример прокрутит страницу до горизонтальной координаты 500 и вертикальной координаты 1000.

3. Прокрутка до определенного элемента

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Пример</title>
</head>
<body>
  <button onclick="scrollToElement()">Прокрутить до элемента</button>
  <div id="targetElement" style="height: 1000px; background-color: lightblue;">
    Целевой элемент
  </div>

  <script>
    // Функция для прокрутки до целевого элемента
    function scrollToElement() {
      const element = document.getElementById('targetElement');
      element.scrollIntoView();
    }
  </script>
</body>
</html>

В этом примере при нажатии на кнопку "Прокрутить до элемента" страница будет прокручена до элемента с идентификатором targetElement.

Заключение

Метод .scrollTo() в JavaScript позволяет программно управлять прокруткой страницы до указанных координат или элементов. Это удобный инструмент для создания пользовательского интерфейса и улучшения пользовательского опыта. Надеюсь, данная статья помогла вам лучше понять, как использовать .scrollTo() в ваших проектах JavaScript.

Стрелочка влево.setProperty() в JavaScript.scrollIntoView() в JavaScriptСтрелочка вправо

Все гайды по Javascript

Как работает метод trim() - JavaScriptКак работает метод toUpperCase() - JavaScriptКак работает метод toLowerCase() - JavaScriptКак работает метод substring() - JavaScriptКак работает метод startsWith() - JavaScriptКак работает метод split() - JavaScriptКак работает метод slice() - JavaScriptКак работает метод search() - JavaScriptКак работает метод replaceAll() - JavaScriptКак работает метод replace() - JavaScriptКак работает метод repeat() - JavaScriptКак работает метод padStart() - JavaScriptКак работает метод padEnd() - JavaScriptКак работает метод matchAll() - JavaScriptКак работает метод match() - JavaScriptКак работает метод localeCompare() - JavaScriptКак работает свойство length - JavaScriptКак работает метод lastIndexOf() - JavaScriptКак работает метод indexOf() - JavaScriptКак работает метод includes() - JavaScriptКак работает метод fromCodePoint() - JavaScriptКак работает метод fromCharCode() - JavaScriptКак работает метод endsWith() - JavaScriptКак работает метод concat() - JavaScriptКак работает метод codePointAt() - JavaScriptКак работает метод charCodeAt() - JavaScriptКак работает метод charAt() - JavaScript
Итератор в JavaScript
try...catch в JavaScriptError в JavaScript
Событие wheel в JavaScriptСобытие unload в JavaScriptСобытие touch в JavaScriptСобытие submit в JavaScriptСобытие scroll в JavaScriptСобытие reset в JavaScriptМетод .preventDefault() в JavaScriptСобытие mouseover в JavaScriptСобытие mouseout в JavaScriptСобытие load в JavaScriptСобытие keyup в JavaScriptСобытие keydown в JavaScriptСобытие invalid в JavaScriptСобытие input в JavaScriptСобытийная модель Event в JavaScriptОбъект события Event в JavaScriptСобытие DOMContentLoaded в JavaScriptСобытие dblclick в JavaScriptСобытие click в JavaScriptСобытие change в JavaScriptСобытие beforeunload в JavaScript
Как работает метод some() - JavaScriptКак работает метод reverse() - JavaScriptКак работает метод reduce() - JavaScriptКак работает метод map() - JavaScriptКак работает метод isArray() - JavaScriptКак работает метод indexOf() - JavaScriptКак работает метод includes() - JavaScriptКак работает метод from() - JavaScriptКак работает метод forEach() - JavaScriptКак работает метод flatMap() - JavaScriptКак работает метод flat() - JavaScriptКак работает метод findIndex() - JavaScriptКак работает метод find() - JavaScriptКак работает метод filter() - JavaScriptКак работает метод every() - JavaScriptМассивы в JavaScript
Открыть базу знаний