Как реализовать плавную прокрутку в JavaScript
Что такое плавная прокрутка?
Плавная прокрутка — это когда веб-страница плавно прокручивается до нужного раздела, а не сразу туда переходит. Это обеспечивает удобную и плавную прокрутку для пользователей.
Преимущества плавной прокрутки
Плавная прокрутка может улучшить взаимодействие с пользователем веб-сайта несколькими способами:
- Улучшите качество изображения, устранив внезапные скачки прокрутки и придав интерфейсу роскошный вид.
- Поощряйте взаимодействие с пользователем с помощью плавной и плавной прокрутки.
- Упростите для пользователей навигацию, особенно при работе с длинными веб-страницами или переходе между различными разделами.
Как сделать плавную прокрутку в JavaScript
Чтобы реализовать плавную прокрутку, вы можете изменить поведение прокрутки по умолчанию с помощью JavaScript.
HTML-структура
Во-первых, создайте необходимую разметку для разных видовых экранов и прокручивайте между ними.
Руководство по плавной прокрутке для веб-разработчиков
- Секция 1
- Раздел 2
- Раздел 3
Секция 1
Раздел 2
Раздел 3
Этот HTML-код содержит панель навигации, состоящую из трех тегов привязки. Атрибут href каждой привязки указывает уникальный идентификатор целевого раздела (например, section1, section2, section3). Это гарантирует, что каждая ссылка, которую вы нажимаете, ведет к соответствующему целевому элементу.
Стили CSS
Затем примените CSS, чтобы страница выглядела привлекательно и организованно. Добавьте следующий код в style.css:
* {маржа: 0; заполнение: 0; box-sizing: граница-коробка; } body { семейство шрифтов: “Segoe UI”, Tahoma, Geneva, Verdana, sans-serif; } навигация { фон: #fff; box-shadow: 3px 3px 5px rgba (0, 0, 0, 0,25); положение: липкое; сверху: 0; отступ: 30 пикселей; } nav ul { display: flex; зазор: 10 пикселей; выравнивание содержимого: по центру; } nav ul li { стиль списка: нет; } nav ul li a { border-radius: 5px; граница: 1,5 пикселя сплошная #909090; текстовое оформление: нет; цвет: #333; отступ: 10px 20px; } раздел { высота: 100вх; дисплей: гибкий; выравнивание элементов: по центру; выравнивание содержимого: по центру; }
Это отобразит ссылку в виде ряда кнопок, а каждый раздел — в виде элемента полной высоты. Но обратите внимание, как нажатие на ссылку заставляет браузер немедленно перейти к соответствующему разделу без анимации.
Реализовано на JavaScript
Чтобы добавить плавный эффект при нажатии на тег привязки, используйте scrollIntoView() . Функция scrollIntoView(), доступная в JavaScript класса Element, позволяет прокручивать элемент в видимую область окна браузера.
При вызове этого метода браузер настраивает положение прокрутки контейнера элемента (например, окна или контейнера с возможностью прокрутки), чтобы сделать элемент видимым.
Добавьте код JavaScript в файл script.js. Начните с прослушивания события DOMContentLoaded, которое срабатывает, прежде чем делать что-либо еще. Это гарантирует, что обратный вызов запускается только тогда, когда DOM полностью загружен и готов к манипулированию.
document.addEventListener(“DOMContentLoaded”, makeLinksSmooth);
Затем определите функцию makeLinksSmooth(). Начните с выбора якорных вкладок в навигации, так как вы захотите настроить их поведение. Затем прокрутите каждую ссылку и добавьте прослушиватель событий для ее события click.
function makeLinksSmooth () { const navLinks = document.querySelectorAll («nav a»); navLinks.forEach((link) => { link.addEventListener(“click”, smoothScroll); }); }
Наконец, определите функцию smoothScroll(), которая принимает прослушиватель событий. Вызовите preventDefault(), чтобы убедиться, что браузер не реализует действие по умолчанию, когда вы нажимаете на ссылку. Следующий код заменит его.
Получите значение href текущего тега привязки и сохраните его в переменной. Это значение будет идентификатором целевого раздела с префиксом ‘ # ‘, поэтому используйте его для выбора элемента раздела с помощью querySelector() . Если targetElement виден, запустите его scrollIntoView и передайте поведение « Smooth » в параметре объекта, чтобы завершить эффект.
function smoothScroll(e) { e.preventDefault(); const targetId = this.getAttribute(“href”); const targetElement = document.querySelector(targetId); if (targetElement) { targetElement.scrollIntoView ({ поведение: “гладкое”, }); } }
Теперь готовая веб-страница будет плавно прокручиваться к каждому разделу при нажатии на ссылку.
Тонкая настройка плавной прокрутки
Чтобы еще больше улучшить плавную прокрутку, вы можете настроить определенные аспекты.
Регулировка положения прокрутки
Вы можете настроить вертикальное положение прокрутки, используя свойство блока аргумента настроек. Используйте такие значения, как «начало», «центр» или «конец», чтобы указать раздел целевого элемента для прокрутки:
targetElement.scrollIntoView({ поведение: “гладкое”, блок: “конец” });
Добавить эффект ускорения
Примените эффект ускорения к анимации прокрутки, чтобы создать более естественный и визуально привлекательный переход. Функции ускорения, такие как плавность входа и выхода или пользовательские кубические кривые, могут контролировать ускорение и замедление движения прокрутки. Вы можете использовать собственный локатор времени со свойством CSS scroll-behavior или библиотеку JavaScript, например ‘smooth-scroll’, для достижения того же результата.
/* CSS-код dụng hiệu ng gia tốc */ html { scroll-behavior: smooth; /* Tùy biến gia tốc cube-bezier */ scroll-behavior: cube-bezier(0.42, 0, 0.58, 1); }
Убедитесь, что реализация плавной прокрутки одинаково работает в разных браузерах. Проверьте и исправьте любые ошибки или несоответствия, которые могут возникнуть.
Вы можете использовать веб-сайт, например Can I Use, для проверки поддержки браузера во время сборки. Рассмотрите возможность использования библиотеки JavaScript или полифилла, чтобы обеспечить кросс-браузерную совместимость и обеспечить бесперебойную работу для всех пользователей.
Плавная прокрутка добавляет утонченную красоту и улучшает взаимодействие с пользователем, создавая привлекательные эффекты плавной прокрутки. Просто следуя приведенным выше шагам, веб-разработчики могут легко реализовать плавную прокрутку с помощью JavaScript.
