Плавная прокрутка при нажатии на якорную ссылку

При навигации по веб-странице с якорными ссылками пользователи ожидают плавного перехода к целевому разделу. Однако поведение прокрутки по умолчанию может быть резким. В этой статье рассматриваются методы обеспечения плавной прокрутки при нажатии на якорные ссылки.

Встроенная поддержка

В таких браузерах, как Chrome и Firefox, реализована встроенная поддержка плавной прокрутки. Это реализовано с помощью свойства «behavior» со значением «smooth» при прокрутке в поле зрения:

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();

        document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
        });
    });
});

Плагин jQuery

Для старых браузеров плагин jQuery может сгладить анимацию прокрутки. Этот метод использует метод «анимации» для перемещения страницы в целевой раздел:

$(document).on('click', 'a[href^="#"]', function (event) {
    event.preventDefault();

    $('html, body').animate({
        scrollTop: $($.attr(this, 'href')).offset().top
    }, 500);
});

Усовершенствованная техника

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

$('a[href^="#"]').click(function () {
    $('html, body').animate({
        scrollTop: $('[name="'   $.attr(this, 'href').substr(1)   '"]').offset().top
    }, 500);

    return false;
});

Оптимизация производительности

Кэширование селектора "$('html, body')" внутри переменной повышает производительность:

var $root = $('html, body');

$('a[href^="#"]').click(function () {
    $root.animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 500);

    return false;
});

Сохранение хеша URL-адреса

Чтобы обновить хеш URL-адреса при плавной прокрутке, используйте обратный вызов «анимации»:

var $root = $('html, body');

$('a[href^="#"]').click(function() {
    var href = $.attr(this, 'href');

    $root.animate({
        scrollTop: $(href).offset().top
    }, 500, function () {
        window.location.hash = href;
    });

    return false;
});

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