Плавная прокрутка, библиотека 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>
- JavaScript. Простой слайдер
- JavaScript. Создание модального окна
- DOM, часть 4 из 4. Атрибуты и свойства
- DOM, часть 3 из 3. Поиск элементов
- DOM, часть 2 из 3. Изменение документа
- Браузерные события, часть 5 из 5. Генерация пользовательских событий
- Браузерные события, часть 4 из 5. Действие браузера по умолчанию
Поиск: Frontend • HTML • JavaScript • Web-разработка • Кнопка • Навигация • Практика