Создание эффектов плавной прокрутки с помощью jQuery

Под термином «jQuery Smooth Scroll» подразумевается метод создания эффектов плавной прокрутки на веб-страницах с помощью библиотеки jQuery. Вот несколько способов добиться плавной прокрутки с помощью jQuery:

Метод 1: использование jQuery animate()

$('a[href^="#"]').on('click', function(event) {
  event.preventDefault();
  var target = $(this.getAttribute('href'));
  if (target.length) {
    $('html, body').stop().animate({
      scrollTop: target.offset().top
    }, 1000);
  }
});

Метод 2: использование jQuery ScrollTop()

$('a[href^="#"]').on('click', function(event) {
  event.preventDefault();
  var target = $(this.getAttribute('href'));
  if (target.length) {
    $('html, body').stop().animate({
      scrollTop: target.offset().top
    }, 1000);
  }
});

Метод 3. Использование плагинов смягчения jQuery

$('a[href^="#"]').on('click', function(event) {
  event.preventDefault();
  var target = $(this.getAttribute('href'));
  if (target.length) {
    $('html, body').stop().animate({
      scrollTop: target.offset().top
    }, 1000, 'easeInOutExpo');
  }
});

Метод 4. Использование свойства CSS-поведения прокрутки (без jQuery)

html {
  scroll-behavior: smooth;
}

Это всего лишь несколько примеров. Существует несколько других методов достижения плавной прокрутки с помощью jQuery. Выберите метод, который лучше всего соответствует требованиям вашего проекта.