02 Июн 2023
2 мин
1626

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

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

Smooth scrolling through webpage sections

Содержание

Плавный скролл к якорю – это популярная функциональность на современных сайтах, которая позволяет пользователям плавно перемещаться к определенному разделу страницы. В этой статье мы рассмотрим, как реализовать такой эффект с использованием JavaScript и CSS.

Пример плавного скролла с использованием 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'.

Веб-разработчик: новая работа через 9 месяцев
Получится, даже если у вас нет опыта в IT
Получить программу

Пример плавного скролла с использованием CSS

Если вы предпочитаете использовать только CSS, вы можете воспользоваться следующим примером. Добавьте этот код в ваш стилевой файл или внутри тега <style>:

html {
  scroll-behavior: smooth;
}

Это свойство scroll-behavior со значением smooth применяет плавный скролл ко всему документу. Однако стоит отметить, что это свойство пока не поддерживается во всех браузерах, в частности, в Safari.

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

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