Клавиша / esc

.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() полезно в случаях длинных веб-страниц, когда нужно прокрутить страницу к определённым частям, а использования ссылок с якорями недостаточно.