"Ссылка на конкретный раздел страницы в HTML: тег <a> и #"

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

Для перехода к конкретному разделу веб-страницы используйте якорный тег с символом # и атрибутом id нужного элемента.

<a href="#target">К цели</a> <!-- Ссылка для перехода -->
...
<div id="target">Вы прибыли</div> <!-- Раздел, к которому ведёт ссылка -->

При клике на данную ссылку, страница автоматически пролистает до указанного раздела.

Завершение

Преобразуйте вашу страницу в удобную для навигации "цифровую книгу", размещая ссылки для быстрого доступа ко всем её разделам. Вот как это можно осуществить:

• Объедините якорный тег <a> и атрибут id нужного вам раздела.
• Помните, что id должен быть уникальным – размещение дублирующих id неприемлемо.
• Откажитесь от устаревшего <a name="...">.
• Для более точной навигации по тексту используйте фрагменты текста.

Помните, что в HTML всегда есть место для символа #.

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

С помощью Фрагментов текста вы сможете переходить на конкретную часть текста:

<a href="#:~:text=target%20strikes">К фразе 'target strikes'</a> <!-- Ссылка на конкретный текст -->

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

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

Плавное прокручивание страницы

Добавьте плавность прокрутке вашей страницы, используя следующий CSS-сниппет:

html {
  scroll-behavior: smooth; /* Примечание: Страница прокручивается плавно */
}

Этот параметр стиля обеспечит комфортное взаимодействие пользователей с вашим сайтом.

Повышаем доступность

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

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

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

Создавайте понятные и элегантные ссылки, скрывая сложные технические детали с помощью настроек сервера, например, через файл .htaccess в Apache или URL Rewrite Module в IIS:

Вместо /#about используйте /about – даже URL заслуживают красоты!

Мониторинг кликов по внутренним ссылкам

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

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function(e) {
    console.log(`Клик по внутренней ссылке: ${this.getAttribute('href')}.`);
  });
});

Фиксированные заголовки и комфортная прокрутка

Иногда фиксированные шапки сайта могут мешать при прокрутке, перекрывая часть контента. Чтобы этого избежать, настройте скрипт прокрутки или примените соответствующие стили CSS, обеспечив комфортную видимость контента под шапкой.