Плавный скролл к якорю – это популярная функциональность на современных сайтах, которая позволяет пользователям плавно перемещаться к определенному разделу страницы. В этой статье мы рассмотрим, как реализовать такой эффект с использованием JavaScript и CSS.
Разработка на Java — востребованное направление, такие специалисты будут нужны на рынке еще долго. На курсе «Java-разработчик» от Skypro освоить профессию можно с нуля за 11 месяцев, даже если вы гуманитарий и ничего не знаете об IT. Программа составлена от простого к сложному и адаптирована для новичков. Преподаватели — практикующие специалисты из крупных компаний: «Сбер», «Самокат» и других.
Пример плавного скролла с использованием JavaScript
Для начала создадим HTML-структуру с несколькими якорями и ссылками на них:
<!DOCTYPE html>
<html>
<head>
<title>Плавный скролл к якорю</title>
</head>
<body>
<nav>
<a href="#section1">Секция 1</a>
<a href="#section2">Секция 2</a>
<a href="#section3">Секция 3</a>
</nav>
<section id="section1">
<h2>Секция 1</h2>
<p>Текст секции 1...</p>
</section>
<section id="section2">
<h2>Секция 2</h2>
<p>Текст секции 2...</p>
</section>
<section id="section3">
<h2>Секция 3</h2>
<p>Текст секции 3...</p>
</section>
</body>
</html>
Теперь добавим JavaScript-код для реализации плавного скролла:
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
Этот код будет находить все ссылки с атрибутом href, начинающимся с #, и добавлять обработчик события click. При клике на ссылку, скрипт предотвращает стандартное поведение браузера и выполняет плавный скролл к соответствующему якорю с помощью метода scrollIntoView() и опции behavior: 'smooth'.
Станьте веб-разработчиком с нуля за 15 месяцев на курсе онлайн-университета Skypro. Преподаватели — практикующие эксперты из VK, «Альфа-Банка», Skyeng и других крупных компаний. В программе нет лишней теории, зато много практических заданий, а результаты курсовых можно положить в портфолио. Специалисты центра карьеры помогут с резюме, сопроводительными письмами и собеседованиями.
Пример плавного скролла с использованием CSS
Если вы предпочитаете использовать только CSS, вы можете воспользоваться следующим примером. Добавьте этот код в ваш стилевой файл или внутри тега <style>:
html {
scroll-behavior: smooth;
}
Это свойство scroll-behavior со значением smooth применяет плавный скролл ко всему документу. Однако стоит отметить, что это свойство пока не поддерживается во всех браузерах, в частности, в Safari.
😉 Теперь у вас есть два примера, как реализовать плавный скролл к якорю на вашем сайте. Выбирайте подходящий для вас вариант и применяйте его в своих проектах. Успехов вам в освоении веб-разработки!
Добавить комментарий