Устранение хешей в URL при использовании якорей в JS

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

Для реализации перехода к якорю посредством JavaScript, воспользуйтесь методом scrollIntoView():

document.querySelector("#yourDestination").scrollIntoView();

Вместо "#yourDestination" укажите селектор указанного якоря, это позволит выполнить плавную прокрутку страницы.

Работа с URL и управление фокусировкой: обеспечение комфорта пользователям сайта

Удаление хэша из URL

Желаете избавиться от хэшей в URL после прокрутки страницы? Примените следующий код:

// Функция для перехода к якорю
function scrollToAnchor(anchor) {
  history.replaceState(null, null, ' '); // Очищаем URL от нежелательного хэша
  document.getElementById(anchor).scrollIntoView(); // Перемещаем пользователя к якорю
  history.replaceState(null, null, anchor); // Возвращаем хэш обратно
}

// Вызываем функцию
scrollToAnchor('yourAnchor');

Метод history.replaceState позволяет модифицировать историю браузера без перезагрузки страницы, держа URL чистым и аккуратным.

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

Управление фокусом для удобства взаимодействия

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

function beamAndFocus(anchor) {
  const element = document.getElementById(anchor);
  element.scrollIntoView();
  element.tabIndex = -1;
  element.focus(); // Автофокус — это не только режим камеры
}

beamAndFocus('yourAnchor');

Установка tabIndex в -1 позволяет переместить фокус на элемент, который обычно не участвует в фокусировке. Это делает веб-страницу более доступной.

Позиционирование прокрутки под контролем: станьте экспертом прокрутки

Точное управление прокруткой

Хотите достичь абсолютного контроля над позицией прокрутки? Выполните следующие действия:

// Определяем координату Y якоря
const newYCoordinate = document.getElementById('yourAnchor').offsetTop;

// Прокручиваем страницу к якорю
window.scrollTo(0, newYCoordinate); // Взмываем ввысь, не выходя из рамок закона!

Расчет общей высоты прокрутки

Необходимо учесть вложенность элементов? Воспользуйтесь этим кодом:

function getSkyHigh(element) {
  let offset = 0;
  while(element) {
    offset += element.offsetTop;
    element = element.offsetParent; // Обрабатываем родительские элементы
  }
  return offset;
}

window.scrollTo(0, getSkyHigh(document.getElementById('yourAnchor')));

Цикл подсчитывает общее смещение от верхней границы страницы, даже если элементы вложены один в другой.

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

Представьте, что переход к якорю на веб-странице — это некий цифровой поход по лесу.

💼 Все готово к переходу к якорю "#everest"!
document.getElementById("everest").scrollIntoView();

Вот и начинается ваше путешествие... 🏔️

Было: [🏖️#beach, 🌆#city, 🏜️#desert]
Стало: [🏞️#forest, 🏔️#everest]

Каждый ваш клик — это шаг по стезям цифровых лабиринтов веб-страницы.

Продвинутая обработка URL при помощи JavaScript

Обновление URL без перезагрузки страницы

Вы можете программно обновить URL после перехода к якорю, не привлекая перезагрузку страницы:

window.location.replace("#" + "yourAnchor"); // Если ссылка несоответствует цели, исправляем её
history.replaceState(null, null, window.location.href.replace(/#+$/, '')); // Очищаем URL от всех хэшей

Поддержка обратной совместимости

Не все браузеры поддерживают history.replaceState. Обязательно обеспечьте обратную совместимость:

if ('replaceState' in window.history) {
  window.history.replaceState(null, null, "freshURL");
} else {
  // Для старых браузеров предусмотрен план "Б"
  window.location.hash = "freshURL";
}

Сохранение исходной функциональности веб-страницы

Сохранение стандартной работы якорей

Пользовательская логика перехода должна дополнять стандартную, а не заменять её:

// Добавляем обработчики для всех якорных ссылок
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function (e) {
    e.preventDefault(); // Отменяем стандартный переход
    const targetID = this.getAttribute('href').substr(1);
    scrollToAnchor(targetID); // Готовимся к переходу
  });
});

Надёжность якорей

При добавлении якорей используйте атрибут id для надёжной работы:

<div id="yourAnchor">Важное сообщение, на которое следует обратить внимание</div>

И помните, атрибуты name сегодня утратили свою актуальность, сейчас предпочтение отдается id!

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

1. <a>: Якорный элемент – HTML: язык разметки гипертекста | MDN — официальное руководство по якорному элементу <a> HTML.
2. JavaScript Window Location — подробное руководство по управлению положением окна в JavaScript.
3. Плавная прокрутка | CSS-Tricks — обсуждение методов реализации плавного скроллинга на сайтах.
4. javascript – Плавная прокрутка якорных ссылок без jQuery – Stack Overflow — общедоступные решения для плавной прокрутки без использования jQuery.
5. Как создать высокопроизводительные CSS анимации | Статьи | web.dev — разбор способов создания эффективных анимаций.
6. Element: метод scrollIntoView() – Веб API | MDN — документация MDN о методе scrollIntoView().
7. API истории – Веб API | MDN — руководство MDN об API истории браузера и управлении историей сессий.