Плавный, нативный скрол


::: разработка, фронтенд, javascript, скролл
Полосы прокрутки семейства Windows

Плавная прокрутка до определенного места на странице — очень распространенная фича, особенно в лендингах. Еще один классический случай — плавный переход по хэшу для навигации по странице.

Для решения этих проблем уже написано много решений. В начале карьеры я и сам такое писал сначала на jQuery, а потом на requestAnimationFrame. К счастью о таких костылях можно забыть, потому что теперь можно передать дополнительный параметр в метод window.scroll, в котором можно указать что прокручивать нужно с анимацией.

Покажи нам код

window.scroll({
  top: 2500,
  left: 0,
  behavior: 'smooth'
});

Демки

Без полифила работает только в Firefox, в Chrome под экспериментальным флагом. Можно добавить полифил и заработает везде. Поэтому я советую использовать именно этот метод для прокрутки на странице и отказаться от сторонних библиотек. А через пару лет можно будет и полифил выкинуть.

Работает для методов scroll, scrollTo, scrollBy, scrollIntoView.

Ссылки

  1. Github полифила
  2. Черновик спецификации
  3. Документация на MDN