Smooth Scroll: Как сделать плавную прокрутку на сайте?

Smooth scroll - это техника плавного скроллинга по веб-странице. Вместо мгновенного перемещения к нужной точке, при прокрутке происходит плавное перемещение вниз или вверх до нужного элемента. Эта техника повышает пользовательский опыт и делает взаимодействие с веб-сайтом более приятным.

Для создания эффекта smooth scroll можно использовать HTML, CSS и JavaScript. Пример кода на JavaScript для реализации Smooth Scroll на странице при вызове ссылки:

// находим все ссылки на странице с атрибутом href, начинающимся с "#"
const links = document.querySelectorAll('a[href^="#"]');
// обрабатываем клик по каждой ссылке
links.forEach((link) => {
  link.addEventListener("click", function(e) {
    // отменяем стандартное поведение ссылки
    e.preventDefault();
    // получаем имя якоря, на который должен произойти скроллинг
    const hash = this.getAttribute("href");
    // проверяем наличие элемента, на который указывает якорь
    const target = document.querySelector(hash);
    if (!target) return;
    // высчитываем положение элемента на странице
    const topOffset = target.getBoundingClientRect().top + window.pageYOffset;
    // анимация скроллинга
    window.scrollTo({
      top: topOffset,
      behavior: "smooth"
    });
  });
});

В этом примере мы используем событие клика на все ссылки, начинающиеся с символа "#", которые указывают на якори на странице. После нажатия на ссылку мы отменяем стандартное поведение (переход по ссылке), получаем имя якоря и проверяем наличие элемента на странице. Если элемент существует, мы высчитываем его положение на странице и запускаем анимацию плавного скроллинга к этому элементу с помощью метода `window.scrollTo()`.

Кроме реализации Smooth Scroll через JavaScript, можно использовать специальные библиотеки, например, jQuery, для быстрой и удобной вставки такого эффекта на страницу. Вместо написания кода обработчика, достаточно подключить скрипт библиотеки и добавить класс "scroll" к ссылке, которая должна использовать эффект.

Ниже пример кода с использованием jQuery для реализации Smooth Scroll:

// подключаем jQuery и пишем обработчик
$(document).ready(function(){
  // задаем скорость скроллинга
  var scrollSpeed = 600;
  // находим все ссылки с классом "scroll"
  $('a.scroll').click(function(){
    // получаем имя якоря, на который должен произойти скроллинг
    var hash = this.hash;
    // анимация скроллинга
    $('html, body').animate({
      scrollTop: $(hash).offset().top
    }, scrollSpeed);
    return false;
  });
});

Этот код на jQuery делает тоже самое, что и код на JavaScript ранее, но в jQuery существуют готовые методы для быстрого и удобного добавления эффекта на страницу. В этом примере мы находим все ссылки с классом "scroll", задаем скорость скроллинга и запускаем анимацию через метод `animate()`, который плавно перемещает страницу к нужному элементу с помощью координат, установленных в `scrollTop`.

В целом, Smooth Scroll - это простой и эффективный способ улучшить пользовательский опыт на веб-сайте, и его реализация с помощью JavaScript или библиотеки jQuery не требует большого количества кода и времени.