.scrollIntoView()

Прокрутить окно браузера до указанного элемента.

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

Кратко

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

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

Как пишется

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

Получаем элемент и накладываем метод scrollIntoView():

        
          
          const element = document.querySelector('#about')element.scrollIntoView()
          const element = document.querySelector('#about')

element.scrollIntoView()

        
        
          
        
      

🤖 В scrollIntoView() можно передать аргумент типа boolean:

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

А ещё в scrollIntoView()` можно передать объект с опциями скролла, где:

  • behavior отвечает за анимацию прокрутки. Принимает smooth, чтобы было плавно, по умолчанию резкое auto;
  • block за вертикальное выравнивание. Принимает start, center, end и nearest;
  • inline за горизонтальное выравнивание. Принимает то же, что и block.
        
          
          element.scrollIntoView({behavior: "smooth", block: "center", inline: "start"})
          element.scrollIntoView({behavior: "smooth", block: "center", inline: "start"})

        
        
          
        
      

Как понять

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

Использовать scrollIntoView() полезно в случаях длинных веб-страниц, когда нужно прокрутить страницу к определённым частям, а использования ссылок с якорями недостаточно.