skip to main content

Element.scroll/scrollIntoView

js

Кратко 🔗

Функция scrollIntoView() позволяет программно прокрутить окно до определённого элемента вне зависимости от положения элемента в окне.

Как пишется 🔗

Относительный скролл всего окна:

let element = document.querySelector("#about") // в element Должен быть любой DOM элемент на странице
element.scrollIntoView()

🤖 У scrollIntoView может быть аргумент типа boolean:

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

Как это понять 🔗

Использовать scrollIntoView наиболее полезно в случаях длинных веб-страниц, где нужен скролл к определенным частям, а использования ссылок с якорями (например, <a href="#about">О нас</a>) недостаточно.

В работе 🔗

Миша 👨‍🔧

🛠 Ниже вариант использования прокрутки к элементу с различными опциями

See the Pen scrollIntoView - в работе by vindi-r (@vindi-r) on CodePen.


Автор: Миша 👨‍🔧