Прокрутка документа к изображению по клику с jQuery

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

Чтобы плавно осуществить прокрутку страницы к конкретному элементу, воспользуйтесь комбинацией методов animate и scrollTop:

$('html, body').animate({ scrollTop: $('#element').offset().top }, 'slow');

Для настройки скорости прокрутки корректируйте параметр 'slow'.

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

Вариант 1: Обеспечение точного позиционирования с выравниванием в области просмотра

Метод scrollIntoView() позволит точно позиционировать элемент внутри viewport:

$('#element').get(0).scrollIntoView({
  behavior: 'smooth',         // плавное перемещение
  block: 'start',             // верх элемента выровнен с верхней границей viewport
  inline: 'nearest'           // выравнивание по ближайшему краю  
});

Элемент будет выровнен по верхней границе области просмотра.

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

Вариант 2: Интеграция с историей браузера

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

location.hash = '#elementId';
$('#elementId').get(0).scrollIntoView();

Такой подход позволит браузеру записать позицию элемента в историю.

Вариант 3: Обеспечение пиксельно-точного отображения

Если требуется точное позиционирование элемента, настройте параметры scrollTop и scrollLeft:

let topPosition = $('#element').offset().top – 20;  
let leftPosition = $('#element').offset().left – 20;
$('html, body').animate({ scrollTop: topPosition, scrollLeft: leftPosition }, 'slow');

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

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

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

$('#carousel').get(0).scrollIntoView();

И так:

До: 🏞️🎠🎈 [🎠 скрыта где-то в глубине парка]
После: 🏞️[🎠]🎈 карусель видна прямо у входа

Метод scrollIntoView() эффективно представит перед вами желаемый аттракцион, разместив его идеально.

Управление прокруткой: погружение глубже

Учёт переменной высоты содержимого

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

let offsetTop = $('#element').offset().top;
$('html, body').animate({ 
  scrollTop: offsetTop > 0 ? offsetTop – 20 : 0  // Исключаем отрицательные значения
}, 'slow');

Продвинутое управление с помощью плагинов

Плагины, такие как jQuery.scrollTo, расширяют возможности управления прокруткой:

• Регулирование времени анимации
• Выбор оси прокрутки
• Добавление отступов

$('body').scrollTo('#element', 800, { offset: -20 }); // Улучшенный способ использования scrollTop

Одно нажатие, множество прокруток

Организуйте прокрутку к увеличенной версии изображения при клике на миниатюру:

$('img.thumbnail').on('click', function() {
  const imageId = $(this).attr('id');
  $('#' + imageId + '_full').get(0).scrollIntoView(); // Теперь у вас изображение в полный экран!
  location.hash = '#' + imageId + '_full';             // Организуем навигацию через хэш
});

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

1. Документация jQuery .scrollTop() — использование jQuery .scrollTop() для управления прокруткой.
2. Документация jQuery .animate() — техника анимации с использованием jQuery для создания живых web-страниц.
3. Прокрутка к элементу с помощью jQuery – Stack Overflow — обсуждения и примеры работы с прокруткой в сообществе разработчиков.
4. Метод scrollIntoView() – Web APIs | MDN — рекомендации по использованию нативного JS вместо jQuery.
5. Плавная прокрутка | CSS-Tricks — сочетание плавной прокрутки и jQuery.
6. Руководство по использованию метода jQuery .animate() — SitePoint — исследование на тему анимации с использованием jQuery.
7. GitHub – flesler/jquery.scrollTo: плагин для анимированной прокрутки с jQuery — легкое в использовании решение для создания плавной прокрутки.