Главная > Блог > Web-разработка > JavaScript и TypeScript >

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

16.05.2022

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

При клике по якорной ссылке браузер автоматически устанавливает положение страницы так, чтобы якорный элемент оказаля в самом верху видимой области. Но у этого метода навигации есть существенный недостаток — прокрутка осуществляется мгновенно, так что трудно понять — что вообще произошло. Сделать прокрутку плавной очень просто с помощью библиотеки 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-разработка • Кнопка • Навигация • Практика