Прокрутка к элементу без jQuery: JS функция и onclick событие

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

Для навигации на веб-странице применяйте метод scrollIntoView() в JavaScript, вызвав его для нужного элемента с определённым id:

document.querySelector('#yourElementId').scrollIntoView({ behavior: 'smooth' });

Метод querySelector ищет элемент, а scrollIntoView() осуществляет плавный переход к нему, благодаря опции behavior: 'smooth'.

Оглядываясь назад: заблуждение о scrollTop и jQuery

Нет необходимости нагружать страницу библиотеками, такими как jQuery, для реализации простоты прокрутки. Применение scrollIntoView() повышает производительность вашего JavaScript и обеспечивает более плавную работу, особенно на мобильных устройствах.

Прокрутка при событиях и изменении URL

Можно связывать scrollIntoView() с событием onclick, что позволяет пользователям перемещаться по сайту без изменения URL-адреса и обновления страницы, при этом обеспечивая интерактивный пользовательский опыт.

Индивидуализация с помощью scrollIntoView

С помощью объекта опций в scrollIntoView(), задайте параметры block и inline для управления позиционированием прокрутки:

element.scrollIntoView({
  behavior: 'smooth',
  block: 'nearest',
  inline: 'start'
});

Таким образом, вы регулируете направление движения полосы прокрутки на "плавном" маршруте.

Выбор элементов подобно художнику: выбираемся из getElementById

querySelector предоставляет гибкий выбор элементов с применением любого CSS-селектора вместо ограниченного getElementById:

document.querySelector('.yourElementClass').scrollIntoView({ behavior: 'smooth' });

Совместимость: Кроссбраузерность прокрутки

Перед тем как добавить интерактивную прокрутку, проверьте совместимость scrollIntoView() с различными браузерами и подготовьте альтернативные решения для тех из них, которые этот метод не поддерживают.

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

Имагинируйте следующую картину:

 Маршрут к каждому **ID** — это 🚩 на пике горы:

До: 🏔............🚩#top........🚩#section1........🚩#footer........🏔

Одно нажатие:

🧗🏽‍♂️ И вы уже у 🚩#section1:

<a href="#section1">Перейти к разделу 1</a>

Улучшение доступности: Внимание к мельчайшим деталям при прокрутке

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

Производительность: Скорость имеет значение

Для оптимизации производительности, особенно на мобильных устройствах, используйте CSS-переходы, чтобы обработку анимации прокрутки выполнял графический процессор (GPU).

Нет ссылки href? Это не проблема!

В случае если невозможно использовать href, воспользуйтесь функцией прокрутки, сохраняя 'ID' в data-атрибутах:

<button data-scrollto="section1">Перейти к разделу 1</button>

document.querySelectorAll('[data-scrollto]').forEach(button => {
  button.addEventListener('click', function() {
    const targetId = this.getAttribute('data-scrollto');
    const targetElement = document.querySelector('#' + targetId);
    targetElement.scrollIntoView({ behavior: 'smooth' });
  });
});

Таким образом, вы поддерживаете семантически правильную структуру HTML и облегчаете использование сайта для пользователя.

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

1. Window: scrollTo() method – Web APIs | MDN — подробное описание метода scrollTo.
2. HTML DOM Element scrollIntoView() Method — детальная информация о методе scrollIntoView().
3. CSS scroll-behavior property — описание свойства scroll-behavior для плавной прокрутки.
4. How to Implement Smooth Scrolling in Vanilla JavaScript — руководство по реализации плавной прокрутки на чистом JavaScript.
5. javascript – Smooth scroll anchor links WITHOUT jQuery – Stack Overflow — обсуждение плавной прокрутки без jQuery на сообществе Stack Overflow.
6. Can I use... Support tables for HTML5, CSS3, etc — информация о поддержке scroll-behavior разными браузерами.
7. How to create high-performance CSS animations | Articles | web.dev — создание анимаций на CSS с высокой производительностью.