Как создать: плавную прокрутку

Учимся использовать CSS для создания плавного эффекта прокрутки.

Плавный скроллинг

Section 1
нажмите меня,平滑滚动至下方 2-й части.

нажмите на ссылку, чтобы увидеть эффект "плавного" скроллинга.

Примечание:удаление атрибута scroll-behavior можно отменить平滑ный скроллинг.

Плавный скроллинг

добавить к элементу <html> scroll-behavior: smooth можно включить плавное скроллинг на весь экран:

Примечание:его также можно добавить к конкретному элементу/контейнеру для скроллинга.

Пример

html {
  scroll-behavior: smooth;
}

попробуйте сами

Поддержка браузеров

в таблице указаны версии первых браузеров, которые полностью поддерживают атрибут scroll-behavior.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
61.0 79.0 36.0 14.0 48.0

многобраузерное решение

для браузеров, не поддерживающих scroll-behavior свойства браузера, вы можете использовать JavaScript или библиотеку JavaScript (например jQuery） чтобы создать решение, работающее во всех браузерах:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$("document").ready(function(){
  // Добавить плавное скроллинг для всех ссылок
  $("a").on('click', function(event) {
    // Убедитесь, что this.hash имеет значение, перед тем как изменять стандартное поведение
    if (this.hash !== "") {
      // Предотвратить стандартное поведение при клике по锚у
      event.preventDefault();
      // Сохраните значение хэш-символа
      var hash = this.hash;
      // Используйте метод animate() jQuery для добавления плавного скроллинга страницы
      // Номер (800) указывает количество миллисекунд, необходимых для скроллинга до указанной области
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
        // После завершения скроллинга добавьте символ (#) в URL (по умолчанию поведение при клике)
        window.location.hash = hash;
      });
    } // Конец if
  });
});
</script>

попробуйте сами

Связанные страницы

Референсная книга:Свойство scroll-behavior CSS