Эффект плавной прокрутки при переходе на ссылку #якорь?

Для реализации эффекта плавной прокрутки при переходе на ссылку с якорем (anchor), мы можем воспользоваться JavaScript в сочетании с CSS. Принцип работы состоит в том, чтобы отловить клик пользователя по ссылке с якорем, затем плавно прокрутить страницу до соответствующего элемента.

Вот шаги, необходимые для реализации этого эффекта:

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

<a href="#section1">Перейти к разделу 1</a>
<a href="#section2">Перейти к разделу 2</a>

2. В CSS файле добавьте стили для элементов, к которым происходит прокрутка. Например:

section {
  height: 100vh; /* высота элемента, соответствующая высоте видимого экрана */
  scroll-snap-align: start; /* для плавной прокрутки */
}

3. В JavaScript файле добавьте код, который будет отлавливать клик по ссылкам с якорями и плавно прокручивать страницу до соответствующего элемента. Например:

document.addEventListener('DOMContentLoaded', function() {
  // отловить клик по ссылкам с якорями
  const links = document.querySelectorAll('a[href^="#"]');
  links.forEach(function(link) {
    link.addEventListener('click', function(e) {
      e.preventDefault(); // блокируем стандартное поведение ссылки

      // получаем целевой элемент для прокрутки
      const target = document.querySelector(this.getAttribute('href'));

      // плавно прокручиваем страницу до целевого элемента
      window.scrollTo({
        top: target.offsetTop,
        behavior: 'smooth'
      });
    });
  });
});

Теперь при клике на ссылки с якорями страница будет плавно прокручиваться до соответствующего элемента. Код выше использует метод scrollTo() с опцией behavior: 'smooth', которая создает плавный скроллинг.

Обратите внимание, что метод scrollTo() не поддерживается в старых версиях браузеров, в таком случае вы можете использовать полифилл или другие библиотеки, такие как jQuery, для обеспечения совместимости со всеми браузерами.