Как создать плавный скрол к якорю на новой странице?

Для создания плавного скролла к якорю на новой странице вам потребуется использовать JavaScript. Вот пошаговая инструкция:

1. Создайте якорь в HTML-коде страницы, к которому вы хотите создать плавный скролл. Пометьте якорь уникальным идентификатором с помощью атрибута id. Например:

<a id="myAnchor"></a>

2. Вам понадобится JavaScript-код для реализации плавного скролла. Поместите его внутри тега <script>. Начните с создания обработчика события для клика на ссылку, которая будет вызывать скролл:

document.addEventListener('DOMContentLoaded', function() {
  var links = document.querySelectorAll('a[href^="#"]');
  
  for (var i = 0; i < links.length; i++) {
    links[i].addEventListener('click', smoothScroll);
  }
})

Этот код выбирает все ссылки на странице, чей атрибут href начинается с символа #, и добавляет обработчик события на каждую ссылку.

3. Определите функцию smoothScroll, которая будет вызываться при клике на ссылку:

function smoothScroll(event) {
  event.preventDefault();
  
  var targetId = event.currentTarget.getAttribute('href');
  var targetPosition = document.querySelector(targetId).offsetTop;
  var startPosition = window.pageYOffset;
  var distance = targetPosition - startPosition;
  var duration = 1000; // Длительность анимации (в миллисекундах)
  var start = null;
  
  window.requestAnimationFrame(step);
  
  function step(timestamp) {
    if (!start) start = timestamp;
    var progress = timestamp - start;
    window.scrollTo(0, easeInOutCubic(progress, startPosition, distance, duration));
    
    if (progress < duration) {
      window.requestAnimationFrame(step);
    }
  }
}

function easeInOutCubic(t, b, c, d) {
  t /= d / 2;
  if (t < 1) return c / 2 * t * t * t + b;
  t -= 2;
  return c / 2 * (t * t * t + 2) + b;
}

4. Обработчик события вызывает функцию smoothScroll, которая рассчитывает позицию элемента, к которому должен быть выполнен скролл, и запускает анимацию скролла с помощью requestAnimationFrame.

5. Функция smoothScroll использует функцию easeInOutCubic для создания плавного эффекта скролла. Вы можете использовать другие алгоритмы интерполяции для создания различных эффектов.

6. И, наконец, не забудьте подключить ваши стили в HTML-коде:

<link rel="stylesheet" href="styles.css">

7. Запустите вашу страницу и проверьте, что плавный скролл к якорю работает правильно.

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