Как сделать так, чтобы при переходе по якорной ссылке внутри страницы, цель оказывалась, по возможности, в центре вьюпорта?

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

Шаг 1: Создайте якорные ссылки
Сначала вам понадобится разметить свою страницу HTML, добавив якорные ссылки там, где вы хотите, чтобы переход был осуществлен. Для этого вам нужно будет использовать тег <a> с атрибутом href, указывающим на идентификатор цели, и символом # перед идентификатором. Например:

<a href="#my-target">Перейти к цели</a>

Местом назначения может быть любой элемент на странице с уникальным идентификатором. Этот идентификатор должен быть указан с помощью атрибута id. Например:

<div id="my-target">Цель</div>

Шаг 2: Добавьте скрипт для плавного скролла
Затем вам потребуется JavaScript, чтобы обеспечить плавный скролл к цели. Для этого вы можете использовать функциональность scrollIntoView() в сочетании с опцией behavior: 'smooth'. Ниже приведен пример кода:

document.addEventListener('DOMContentLoaded', function() {
  var anchorLinks = document.querySelectorAll('a[href^="#"]');
  
  for (var i = 0; i < anchorLinks.length; i++) {
    anchorLinks[i].addEventListener('click', function(e) {
      e.preventDefault();
      var target = document.querySelector(this.getAttribute('href'));
      
      target.scrollIntoView({
        behavior: 'smooth',
        block: 'center'
      });
    });
  }
});

Как вы видите, это обработчик события, реагирующий на клик по любой ссылке, которая начинается с #. При клике на такую ссылку он получает элемент цели, на которую ссылается ссылка, с помощью querySelector, а затем вызывает функцию scrollIntoView(), чтобы сделать скролл к цели. Опция block: 'center' гарантирует, что цель будет располагаться в центре вьюпорта.

Шаг 3: Добавьте стили для выравнивания
Чтобы добиться идеального центрирования цели, вам может понадобиться CSS, чтобы правильно выровнять цель во вьюпорте. Ниже приведен пример стилей, которые можно применить к элементу цели:

#my-target {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

В этом примере мы используем флекс-контейнер с выравниванием по центру для обеспечения вертикального и горизонтального центрирования элемента.

Обратите внимание, что необходимые стили и скрипты следует добавлять в соответствующие файлы вашей веб-страницы или внедрять их в структуру вашего проекта в соответствии с правилами лучшей практики.