.scrollTo()

Прокрутить страницу до точки координат.

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

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

Как пишется

Секция статьи "Как пишется"
        
          
          window.scrollTo(x, y)
          window.scrollTo(x, y)

        
        
          
        
      

Где x и y — это координаты левого верхнего угла экрана.

Для скролла внутри элемента (например, в <div>) нужно сначала получить этот элемент. Прокрутим первый на странице <div> на 100 пикселей вниз (этот блок должен содержать достаточно контента, чтобы появился скроллбар):

        
          
          const div = document.querySelector('div')div.scrollTo(0, 100)
          const div = document.querySelector('div')

div.scrollTo(0, 100)

        
        
          
        
      

Вместо координат в scrollTo() можно передать объект с тремя параметрами:

  • top задаёт количество пикселей для прокрутки по оси Y;
  • left то же самое, но по оси X;
  • behavior определяет поведение прокрутки. По умолчанию резкое auto, но можно указать плавный smooth.
        
          
          window.scrollTo({  top: 100,  left: 0,  behavior: 'smooth'})
          window.scrollTo({
  top: 100,
  left: 0,
  behavior: 'smooth'
})

        
        
          
        
      

Как понять

Секция статьи "Как понять"

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

На практике

Секция статьи "На практике"

Дока Дог советует

Секция статьи "Дока Дог советует"

🛠 Прокрутка на определённые координаты полезна, когда вёрстка страницы или элемента одинакова. Это сложно гарантировать в реальном мире, где сайт пытается адаптироваться под разрешение экрана каждого пользователя. Но рассмотрим пример из идеальной вселенной:

Открыть демо в новой вкладке

Во вселенной, где адаптивный дизайн используется везде — используют scrollBy() или scrollIntoView() 😎