Реализация плавного скролла к div с помощью jQuery

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

Для реализации плавной прокрутки до элемента с заданным идентификатором div id можно применить метод jQuery .animate(). Эффект активируется кликом по якорным ссылкам. Ниже представлен код, позволяющий странице плавно прокручиваться, создавая ощущение скольжения на ховерборде:

$('a[href*="#"]').click(function(e) {
  var id = $(this).attr('href');
  var $id = $(id);
  if ($id.length) {
    e.preventDefault();
    $('html, body').animate({ scrollTop: $id.offset().top }, 'slow');
  }
});

Данный скрипт предоставляет возможность плавного перехода к секции страницы после клика по якорной ссылке. Обработчик события на <a> проверяет существование целевого элемента, отменяет стандартное действие при клике и затем плавно прокручивает страницу к нужному div id, используя свойство scrollTop, при помощи анимации со сниженной скоростью.

Подробное объяснение и пояснения

Совместимость с различными браузерами

Совместимость с различными браузерами может вызывать головную боль. Чтобы ваш код работал безупречно, используйте селекторы html, body в методе .animate(). В качестве альтернативы можно рассмотреть метод scrollIntoView({ behavior: "smooth" }), являющийся новым подходом на чистом JavaScript. Однако следует учитывать совместимость, поскольку браузеры могут поддерживать стандарты не всегда последовательно.

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

Фиксированные элементы и отступы в верстке

Если на вашем сайте используются фиксированная шапка или всплывающие элементы в верстке, важно скорректировать значение scrollTop, чтобы исключить скрытие div под этими элементами. Это позволит пользователям спокойно навигировать по сайту:

// Вычисление высоты шапки для корректного отображения
var offset = $id.offset().top – $('header').outerHeight();
$('html, body').animate({ scrollTop: offset }, 1000);

Динамический расчет отступов

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

// Готовность к изменениям, сложностям и вариациям
function calculateOffset(element) {
  // Логика расчета отступов
  return element.offset().top – dynamicPadding();
}

Обработка навигации

Хотя плавная прокрутка придает изящества пользовательскому опыту, необходимо исключить путаницу в навигации URL (url#section). Использование pushState помогает поддерживать порядок в history и обеспечивает возможность добавления закладок:

// Поддержание порядка в навигации URL
$('a[href*="#"]').click(function(e) {
  history.pushState(null, null, this.href);
});

Добавьте этот блок после раздела Визуализация, но до Полезные материалы.

Продвинутые приемы и устранение неполадок

Альтернативные события-триггеры

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

// Более разнообразно, чем простой клик — плавная прокрутка при событии "mouseenter"
$('#menu-button').on('mouseenter', function() {
  // Активация плавной прокрутки
});

Безопасная обработка данных

При работе со сложными расчетами и пользовательскими данными всегда следует думать о безопасности. Для безопасного преобразования строк в числа используйте parseInt или parseFloat:

// Пользовательский ввод, требующий обработки
var userOffsetInput = '100px';
// Безопасное преобразование в число
var safeOffset = parseInt(userOffsetInput);

Триггеры для определенных классов или селекторов

Вы можете привязать плавную прокрутку не только к id, но и к элементам с определенными class или data attribute. Это делает ваш код универсальным:

// Гибкость в действии
$('[data-scroll-trigger]').click(function() {
  // Прокрутка к соответствующему элементу
});

Проверка на ошибки

Как в мире, так и пользовательский ввод не всегда идеален. Проверьте наличие целевого элемента, чтобы предотвратить ошибки и обеспечить удобное взаимодействие с пользователем:

// Всегда проверяйте целевые элементы, как парашют перед прыжком
if ($target.length === 0) {
  console.warn(`Такой элемент не существует.`);
  return;
}

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

Воспринимайте плавную прокрутку к элементу при помощи jQuery, как слоеный коктейль:

Верх 🍑 (div#id-4)
Среда 🍎 (div#id-3)
Низ 🍒 (div#id-2)
Основание 🍇 (div#id-1) // Вы здесь

Вы используете вызов jQuery:

$('html, body').animate({
    scrollTop: $('#id-2').offset().top
}, 1000);

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

🍇 -> 🍒 -> 🍎
От: Основания 🍇 (div#id-1)
До:   Низа 🍒 (div#id-2) // Перешли на уровень "вишенки"

Вот так работает магия плавной прокрутки.

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

1. .animate() | jQuery API Документация — Все о методе .animate() в jQuery.
2. Плавная прокрутка | CSS-Tricks — Все о плавной прокрутке при помощи jQuery.
3. javascript – Плавная прокрутка после клика на якорь – Stack Overflow — Обсуждения и решения проблемы плавной прокрутки на Stack Overflow.
4. Метод Element: scrollTo() – Веб API | MDN — Описание методов без использования jQuery для плавной прокрутки от Mozilla Developer Network.
5. Как сделать плавную прокрутку на чистом JavaScript — SitePoint — Руководство по созданию эффекта плавной прокрутки без jQuery.
6. GitHub – flesler/jquery.scrollTo: Легкий jQuery плагин для плавной прокрутки — Простой метод добавления плагина для плавной прокрутки в jQuery.
7. Метод jQuery animate() — Уроки по методу .animate() в jQuery для начинающих от W3Schools.