Плавная прокрутка по якорным ссылкам

По умолчанию, браузеры при клике по ссылке с якорем, делают моментальный переход «прыжок» к целевому элементу. Чтобы сделать прокрутку плавной, в ассортименте разработчика есть два подхода: CSS и JavaScript.

Scroll Behavior

CSS свойство scroll-behavior сообщает браузеру как обрабатывать прокрутку инициированную внутри элементов.

По умолчанию свойство имеет значение auto, которое отвечает за мгновенный переход. Именно такой тип перехода встречается на сайтах чаще всего. Если установить параметр smooth, браузер будет анимировать прокрутку.

Зачастую данное свойство применяется ко всем документу и прописывается тегу html, если нужно анимировать переход внутри конкретного элемента, свойство применяется к нему.

/* Плавная прокрутка внутри элемента */
#my-element {
  scroll-behavior: smooth;
}

/* Плавная прокрутка всего документа */
html {
  scroll-behavior: smooth;
}

Но не стоит забывать о пользователях, которые предпочитают отключать анимацию в настройках браузера или операционной системе.

@media screen and (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

Поддержка браузерами

У данного свойства хорошая поддержка современными браузерами за исключением Safari (десктоп и мобильный), а так же IE.

Почему вы все еще можете использовать JavaScript

Несмотря на то, что вышеописанный подход имеет неплохую поддержку и в большинстве случаях этого достаточно для использования в проекте, вот несколько причин по которым JS все еще может оказаться полезным:

1. Свойство scroll-behavior не поддерживает настройки ускорения, замедления и продолжительности, для этого вам нужен JavaScript.
2. Вы хотите, чтобы плавная прокрутка работала в разных браузерах. Решение JavaScript может предоставить вам более широкую поддержку браузеров.

Плагин Smooth Scroll

Вы по-прежнему можете использовать любые доступные JS-плагины для включения на сайте плавной прокрутки. Один из таких Smooth Scroll. Автор данного плагина прекратил работу над ним, так как не видит в нем необходимости в условиях развития CSS решения.

Плагин поддерживает все современные браузеры, включая IE9 и выше, а так же имеет множество настроек.

Плавная прокрутка с помощью jQuery

jQuery тоже умеет плавно крутить педали страницу. Следующий код инициализирует плавную прокрутку к якорю на той же странице. Он имеет некую логику для определения якорных ссылок и не затрагивает другие, а так же устанавливает фокус на якорный элемент после прокрутки.

// Select all links with hashes
$('a[href*="#"]')
  // Remove links that don't actually link to anything
  .not('[href="#"]')
  .not('[href="#0"]')
  .on('click', function(event) {
    // On-page links
    if (
      location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') 
      && 
      location.hostname == this.hostname
    ) {
      // Figure out element to scroll to
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      // Does a scroll target exist?
      if (target.length) {
        // Only prevent default if animation is actually gonna happen
        event.preventDefault();
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000, function() {
          // Callback after animation
          // Must change focus!
          var $target = $(target);
          $target.trigger('focus');
          if ($target.is(":focus")) { // Checking if the target was focused
            return false;
          } else {
            $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
            $target.trigger('focus'); // Set focus again
          };
        });
      }
    }
  });

Источник кода

Упрощенный вариант:

$('a[href*="#"]').on('click', function() {
  $('html, body').animate({
    scrollTop: $($.attr(this, 'href')).offset().top
  }, 400);
  return false;
});