Плавная прокрутка к якорю на JavaScript и jQuery

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

Пример якорной ссылки (нажми для перехода)

Для удобства работы с такими ссылками рекомендую установить для них определенный класс, например «scroll-to»:

<a href="#ya1" class="scroll-to">Ссылка 1</a>
<a href="#ya2" class="scroll-to">Ссылка 2</a>
<a href="#ya3" class="scroll-to">Ссылка 3</a>

У элементов, к которым нужно осуществить прокрутку, должны быть прописаны атрибуты: «id="ya1"» и так далее.

Прокрутка на jQuery

Самый простой способ организации плавной прокрутки, это использовать библиотеку jQuery.

$("a.scroll-to").on("click", function(e){
    e.preventDefault();
    var anchor = $(this).attr('href');
    $('html, body').stop().animate({
        scrollTop: $(anchor).offset().top - 60
    }, 800);
});

В примере на все ссылки с классом «scroll-to» навешивается событие «onclick». Двумя важными параметрами в этом коде являются значения «60» и «800».

• 60 — высота фиксированной плавающей шапки, если она есть. Устанавливается чтобы при прокрутке якорный элемент не перекрывался ей. Если фиксированной шапки нет, то значение убирается или устанавливается в 0.
• 800 — скорость прокрутки в миллисекундах. Чем меньше значение, тем быстрее будет переход.

Плавная прокрутка на чистом JS

Теперь рассмотрим код на чистом JavaScript без использования сторонних библиотек.

const anchors = document.querySelectorAll('a.scroll-to')

for (let anchor of anchors) {
  anchor.addEventListener('click', function (e) {
    e.preventDefault()
    
    const blockID = anchor.getAttribute('href')
    
    document.querySelector(blockID).scrollIntoView({
      behavior: 'smooth',
      block: 'start'
    })
  })
}

Код вырос незначительно, а функционал остался прежним. Здесь используется стандартный JavaScript метод «scrollIntoView». Он позиционирует прокрутку так, чтобы элемент оказался в видимой области браузера. Метод принимает 2 параметра:

• behavior — определяет тип анимации — auto или smooth;
• block — задает в какое место элемента надо переместиться, принимает значения — start, center, end или nearest.