Плавная прокрутка при клике на якорь: решение на jQuery

Быстрый ответ

Чтобы реализовать плавную прокрутку в JavaScript, достаточно использовать метод scrollIntoView с параметром behavior: 'smooth'. Этот подход прост и эффективен.

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function(e) {
    e.preventDefault();
    const destination = document.querySelector(this.getAttribute('href'));
    if (destination) {
      destination.scrollIntoView({ behavior: 'smooth' });
    }
  });
});

Данный код назначает обработчик кликов для всех якорных ссылок на странице. Этот обработчик отменяет обычное поведение перехода по якорной ссылке и заменяет его плавной прокруткой до указанного элемента.

Плавный экспириенс с помощью CSS

Если вам ближе работа с CSS, то плавную прокрутку для всей страницы можно включить следующим образом:

html {
  scroll-behavior: smooth;
}

Если на странице есть фиксированный заголовок, стоит применить свойство scroll-padding-top:

body {
  scroll-padding-top: 70px; // Эта величина соответствует высоте фиксированного заголовка
}

Обратная совместимость: решение на JavaScript для устаревших браузеров

Для браузеров старых версий, включая достопочтенный Internet Explorer, можно использовать метод animate из библиотеки jQuery:

$('a[href^="#"]').on('click', function(e) {
  e.preventDefault();
  const target = $($(this).attr('href'));
  $('html, body').animate({
    scrollTop: target.offset().top – 50 // Смещение для учёта фиксированного заголовка
  }, 1000, function() {
    window.location.hash = target.selector;
  });
});

Для более эффективной работы сохраните селекторы в переменных:

const $anchors = $('a[href^="#"]');
$anchors.on('click', function(e) {
  // Здесь будет обработчик событий
});

Совместимость с браузерами

Перед выбором способа прокрутки убедитесь, что он поддержан используемыми браузерами:

• scroll-behavior: smooth работает отлично в современных браузерах.
• scrollIntoView идеально подходит к использованию с параметром { behavior: 'smooth' }.
• Для более детализированих настроек можно использовать методы window.scroll или window.scrollBy с такими же параметрами.

Визуализация

Плавную прокрутку можено воображать как поездку на лифте:

Клик: 🔗 (Якорная ссылка)
Процесс плавной прокрутки: Начало движения лифта

Сначала: 🏢 [Вы на первом этаже]
В процессе: 🛗...🛗...🛗 [Лифт поднимает вас вверх]
Конечный пункт: 🏢 [Вы достигли 5-го этажа. Наслаждайтесь видом!]

Профессиональные рекомендации по улучшению плавной прокрутки

Обновление URL с помощью history.pushState

Для того чтобы обновлять URL без перезагрузки страницы, используйте history.pushState:

window.history.pushState(null, null, target);

Добавьте этот код в обработчик события прокрутки или в колбэк анимации от jQuery.

Подробнее об этом расскажет наш спикер на видео

Учёт фиксированных заголовков

Для корректной работы прокрутки с фиксированным заголовком потребуется дополнительная настройка:

const headerHeight = document.querySelector('.fixed-header').offsetHeight;
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
window.scrollBy(0, -headerHeight);

Универсальная функция прокрутки: экономим ресурсы

Согласно принципу DRY (Don't Repeat Yourself), создайте универсальную функцию прокрутки:

function smoothScrollTo(selector) {
  const target = document.querySelector(selector);
  if (target) target.scrollIntoView({ behavior: 'smooth' }); 
}

Эта функция позволит вам вызывать плавную прокрутку в любом месте кода.

Внимание к доступности: Будьте внимательны

Плавная прокрутка не только приятна для взгляда, но и полезна для удобства навигации и доступности сайта:

• Удостоверьтесь в работоспособности с помощью клавиатуры и утилит чтения с экрана.
• Старайтесь не отбирать у пользователя контроль над прокруткой в излишней мере.

Полезные материалы

1. Полное руководство по плавной прокрутке | CSS-Tricks — основы плавной прокрутки с использованием jQuery.
2. Element: scrollIntoView() – Веб-API | MDN — подробное изучение метода scrollIntoView().
3. CSSOM View Module — стандарты W3C, относящиеся к scroll-behavior, включая плавную прокрутку в CSS.
4. .animate() | jQuery API Documentation — метод .animate() для создания эффектов плавной прокрутки с помощью jQuery.
5. Теги 'javascript+click+events' на Stack Overflow — обсуждения, связанные с обработкой событий клика на JavaScript.
6. Полное руководство по ссылкам и кнопкам | CSS-Tricks — всё от А до Я о стилизации и использовании ссылок и кнопок.
7. Как реализовать плавную прокрутку на чистом JavaScript | SitePoint — пошаговая инструкция по внедрению плавной прокрутки без использования фреймворков.
8. Can I use... – таблицы поддержки для HTML5, CSS3, и др. — проверьте поддержку свойства scroll-behavior разными браузерами.