Как сделать - Плавную прокрутку
Узнать, как создать эффект плавной прокрутки с помощью CSS.
Плавная прокрутка
Примечание: Этот пример не работает в Internet Explorer, Edge или Safari (для" кроссбраузерного " решения см. пример ниже).
Раздел 1
Нажмите на ссылку, чтобы увидеть эффект "плавной" прокрутки.
Нажмите на меня, чтобы плавно прокрутить до Раздел 2 нижеПримечание: Удалите свойство scroll-behavior, чтобы удалить плавную прокрутку.
Создать плавную прокрутку
Добавить scroll-behavior: smooth
к элементу <html>, чтобы включить плавную прокрутку для всей страницы (Примечание: также можно добавить его в определенный элемент/контейнер прокрутки):
Поддержка браузеров
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает свойство scroll-behavior.
Свойство | |||||
---|---|---|---|---|---|
scroll-behavior | 61.0 | Не поддерживаемый | 36.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) {
// Убедись в этом что .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;
});
} // Конец, если
});
});
</script>
Редактор кода »Совет: Подробнее о свойстве scroll-behavior читайте в нашем справочнике по CSS: CSS Свойство scroll-behavior.