Плавная прокрутка, библиотека hsnaydd/moveTo

16.05.2022

Теги: FrontendHTMLJavaScriptWeb-разработкаКнопкаНавигацияПрактика

При клике по якорной ссылке браузер автоматически устанавливает положение страницы так, чтобы якорный элемент оказаля в самом верху видимой области. Но у этого метода навигации есть существенный недостаток — прокрутка осуществляется мгновенно, так что трудно понять — что вообще произошло. Сделать прокрутку плавной очень просто с помощью библиотеки hsnaydd/moveTo.

Подготовим тестовую страницу:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Smooth scroll</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moveTo/1.8.2/moveTo.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // здесь будет код плавной прокрутки
        })
    </script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        section {
            height: 100vh;
            overflow: hidden;
        }
        section:nth-child(1) {
            background: #ffcccc;
        }
        section:nth-child(2) {
            background: #ccffcc;
        }
        section:nth-child(3) {
            background: #ccccff;
        }
    </style>
</head>
<body>
    <section id="top-page">
        <h1>Smooth scroll</h1>
        <button data-target="#features">Features</button>
        <button data-target="#contacts">Contacts</button>
    </section>

    <section id="features">
        <h2>Features</h2>
        <button data-target="#top-page">Top page</button>
    </section>

    <section id="contacts">
        <h2>Contacts</h2>
        <button data-target="#top-page">Top page</button>
    </section>
</body>
</html>

На GitHub есть примеры использования библиотеки — для прокутки к элементу target надо вызвать метод move():

const moveTo = new MoveTo();
const target = document.getElementById('target');
moveTo.move(target);

Нам нужно добавить обработчик события клика для всех кнопок навигации и в момент клика вызывать метод move():

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const moveto = new MoveTo()
        const buttons = document.querySelectorAll('button')
        buttons.forEach(button => {
            if (button.dataset.target) {
                const target = document.querySelector(button.dataset.target)
                if (target) {
                    button.addEventListener('click', () => moveto.move(target))
                }
            }
        })
    })
</script>

Альтернативный способ — зарегистрировать триггер (элемент, при клике по которому будет выполнена плавная прокрутка):

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const moveto = new MoveTo()
        const buttons = document.querySelectorAll('button')
        buttons.forEach(button => {
            if (button.dataset.target) {
                const target = document.querySelector(button.dataset.target)
                if (target) {
                    // button.addEventListener('click', () => moveto.move(target))
                    moveto.registerTrigger(button)
                }
            }
        })
    })
</script>

Поиск: Frontend • HTML • JavaScript • Web-разработка • Кнопка • Навигация • Практика

Каталог оборудования
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Производители
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Функциональные группы
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.