Как сдвинуть якорную ссылку выше на странице без JS

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

Вы можете корректировать положение якорных ссылок с помощью CSS-псевдоэлементов. Определите невидимый элемент перед целевым элементом с отрицательным отступом верхней границы и укажите положительный внешний отступ.

.anchor::before {
  content: '';
  display: block;
  margin-top: -50px; /* Величина смещения */
  padding-top: 50px;
  visibility: hidden;
}

Присвойте класс .anchor тем элементам, к которым вы хотите привязать якоря. Значение margin-top подбирайте в зависимости от необходимого смещения.

Детализированный контроль через CSS

Применение scroll-margin

scroll-margin-top предоставляет альтернативный механизм для смещения целевого элемента:

.target {
  scroll-margin-top: 100px; /* Высота стандартного заголовка или желаемый отступ */
}

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

Использование псевдоэлементов

В случае необходимости поддержки старых браузеров предпочтительно использовать подход с псевдоэлементами.

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

Вообразите, что ваш корабль (⚓) должен быть пришвартован к маяку (🗼) на определенном расстоянии:

С обычным якорем: [🗼]

Мы стремимся привязать корабль на некоторое расстояние выше:

Скорректированный якорь: [⚓]

Мы размещаем невидимый маркер (⭕) на требуемом нами расстоянии выше маяка:

Желаемое положение: [⭕] [🗼]

Теперь якорь находится там, где ему место, что гарантирует четкость обзора и предотвращает чрезмерное приближение к границе экрана (💻).

Контрольное управление через JavaScript

Управление позицией прокрутки

Если CSS оказывается непригоден, метод window.scrollTo в JavaScript позволяет точно контролировать положение прокрутки.

// Слежение за кликами по якорным ссылкам
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function (e) {
    e.preventDefault(); // Отмена стандартного поведения якоря

    const targetId = this.getAttribute('href');
    const targetElement = document.querySelector(targetId);

    // Расчёт позиции и применение отступа
    const offsetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset – 50;

    // Плавная прокрутка к скорректированной позиции
    window.scrollTo({
      top: offsetPosition,
      behavior: "smooth"
    });
  });
});

Обработка повторных кликов и изменений в URL

Чтобы результативно реагировать на последовательные клики и изменения хеша в URL, используйте обработчики событий:

window.addEventListener('hashchange', function() {
  // Логика коррекции позиции после изменения хеша
});

Введение задержки через setTimeout

Иногда может потребоваться кратковременная задержка:

setTimeout( () => window.scrollTo(...), 1); // Микроскопическая задержка выполнения scrollTo

Инструментарий JavaScript

Абсолютное позиционирование для точного контроля

В качестве замены методу с padding/margin в CSS возможно использовать следующий подход:

• Оберните целевые элементы для якорей в контейнер с атрибутом position: relative.
• Установите для якорных элементов position: absolute, дополнительно настроив их положение через свойство top.

jQuery для современных разработчиков

Если вам ближе использование jQuery:

$('a[href^="#"]').on('click', function(event) {
  // Логика, аналогичная scrollTo, но выполненная с помощью jQuery
});

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

1. Smooth Scrolling | CSS-Tricks — Детальный гайд по плавной прокрутке с примерами на jQuery.
2. Element: scrollIntoView() method – Web APIs | MDN — Подробное описание метода scrollIntoView() для прокрутки элемента в область видимости.
3. CSS :target Selector — Пример использования CSS псевдо-класса :target от W3Schools.
4. .animate() | jQuery API Documentation — Для тех, кто предпочитает динамическую анимацию, функция .animate() в jQuery.
5. Fixed Headers and Jump Links? The Solution is scroll-margin-top | CSS-Tricks — Руководство по применению якорей с фиксированными заголовками.