Проскроллить до якоря на странице HTML с помощью JavaScript

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

Чтобы прокрутить страницу к определённому элементу, необходимо использовать метод scrollIntoView():

document.querySelector("#target-anchor").scrollIntoView();

В этом случае необходимо заменить "#target-anchor" на CSS-селектор нужного элемента. Такой подход позволит вам быстро перейти к определённому разделу страницы без каких-либо усилий.

Для более плавной прокрутки добавьте параметр behavior со значением 'smooth':

document.querySelector("#target-anchor").scrollIntoView({
  behavior: 'smooth'
});

Подробная навигация с помощью различных методов

Использование метода scrollTo в сочетании с getBoundingClientRect

Отличной техникой точного позиционирования является использование метода scrollTo с учетом значений pageYOffset и getBoundingClientRect():

const element = document.querySelector("#target-anchor");
const topPosition = element.getBoundingClientRect().top + window.pageYOffset;

window.scrollTo({
  top: topPosition,
  behavior: 'smooth'
});

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

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

Мгновенное перенаправление с использованием location.hash

Для непосредственной навигации без анимации можно изменить location.hash:

window.location.hash = '#target-anchor';

Это своего рода аналог команды Ctrl + C: быстро и без лишних затрат.

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

Процесс прокрутки страницы к якорю выглядит следующим образом:

Этажи здания: [🏢🔝]      // Далёкий якорь
                 [🏢]        // Промежуточный HTML-код
                 [🏢📍]      // Наше текущее местоположение
                 [🏢]        // ...
                 [🏢🚪]      // Начальная точка

Для перехода к желаемому div:

window.location = '#top'; // И мы отправляемся наверх по лифту! 🛗

Определите необходимый якорь и наслаждайтесь плавной прокруткой.

Работаем с якорными ссылками и позиционированием

В HTML-тегах используйте атрибуты name или id для создания ориентиров:

<div id="target-anchor">Здесь ваш маяк для навигации!</div>

Настройте позиции якорей для улучшения видимости на странице:

#target-anchor {
  scroll-margin-top: 20px; /* Обеспечиваем превосходный обзор */
}

jQuery: универсальность в действии

Для совместимости с различными браузерами и реализации плавных эффектов используйте библиотеку jQuery:

$('html, body').animate({
  scrollTop: $("#target-anchor").offset().top
}, 1000); // Задаем продолжительность анимации прокрутки

Получившаяся функция превратит процесс прокрутки в кинематографическое действие с возможностью управления временем.

Страхуемся от особенностей браузеров

Адаптируемся к браузерам

Проверьте корректность работы кода в различных браузерах, таких как Firefox и Safari, чтобы обеспечить единообразное поведение прокрутки на разнообразных платформах.

Подготовка DOM к действию

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

document.addEventListener("DOMContentLoaded", function() {
  // Всё готово, можно начинать.
});

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

Практикуемся на CodePen

Примеры кода на CodePen помогут вам усовершенствовать свои навыки:

• Обучение на живых демонстрационных примерах
• Тестирование и оценка внесенных изменений
• Обмен опытом с сообществом разработчиков

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

1. Window: scrollTo() method – Web APIs | MDN — детальное руководство по методу прокрутки от MDN.
2. Smooth Scrolling | CSS-Tricks — всё, что нужно знать о плавной прокрутке с помощью jQuery.
3. HTML Links Hyperlinks — основы использования якорных ссылок в HTML.
4. javascript – Smooth scrolling when clicking an anchor link – Stack Overflow — полезные советы от сообщества о плавной прокрутке.