Вебинары Разобраться в IT Реферальная программа
Программирование Аналитика Дизайн Маркетинг
02 Июн 2023
3 мин
4471

Как сделать плавный скролл к якорю

Узнайте, как сделать плавный скролл к якорю на вашем сайте с помощью двух простых примеров на JavaScript и CSS!

Плавный скролл к якорю – это популярная функциональность на современных сайтах, которая позволяет пользователям плавно перемещаться к определенному разделу страницы. В этой статье мы рассмотрим, как реализовать такой эффект с использованием 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 =&gt; {
    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.

😉 Теперь у вас есть два примера, как реализовать плавный скролл к якорю на вашем сайте. Выбирайте подходящий для вас вариант и применяйте его в своих проектах. Успехов вам в освоении веб-разработки!

Добавить комментарий