.scrollTo()

Метод 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() 😎

+ Развернуть