Кнопка для прокрутки страницы наверх — простой элемент интерфейса, облегчающий навигацию пользователей на веб-сайтах. Хотя такая кнопка кажется обычной деталью современного дизайна, её появление связано с эволюцией взаимодействия человека с цифровыми интерфейсами.
Первые элементы управления скроллингом появились ещё в эпоху первых графических операционных систем. Уже в середине 80-х годов прошлого века пользователи могли пользоваться полосой прокрутки в приложениях. Позднее появились первые вертикальные полосы в браузерах.
Однако идея отдельной кнопки появилась значительно позже, примерно в конце 90-х. Когда экраны мониторов стали больше, пользователям стало неудобно постоянно тянуться мышью к полосе прокрутки. Тогда разработчики начали задумываться над созданием отдельных элементов интерфейса, позволяющих быстро вернуться к началу страницы.
Первоначально такие решения применялись преимущественно на форумах и новостных сайтах с большим количеством текста. Сегодня практически каждый сайт имеет такую возможность, будь то стрелочка, иконка со стрелкой вверх или плавающая кнопка.
Почему именно эта маленькая кнопка «Наверх» стала столь популярной?
Простое нажатие позволяет мгновенно оказаться в верхней части страницы, что особенно полезно на мобильных устройствах, где полоса прокрутки занимает большую площадь экрана.
Особенно актуально на страницах с длинным контентом. Это улучшает восприятие информации и снижает усталость глаз от постоянного перемещения взгляда между нижней частью страницы и верхним меню.
Такие кнопки легко интегрируются в любой дизайн сайта благодаря простоте их разработки и доступности готовых решений.
Давайте рассмотрим базовый код такой кнопки.
Для начала создадим HTML-разметку для работы нашей кнопки
<!-- Контент -->
<p style="max-width: 200px; margin-inline: auto">
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus
ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus
duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar
vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl
malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class
aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos
himenaeos. Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque
faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi
pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor.
Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa
nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class
aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos
himenaeos. Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque
faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi
pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor.
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus
ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus
duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar
vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl
malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class
aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos
himenaeos. Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque
faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi
pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor.
Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa
nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class
aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos
himenaeos. Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque
faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi
pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor.
Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa
nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class
aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos
himenaeos. Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque
faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi
pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor.
Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa
nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class
aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos
himenaeos.
</p>
<!-- Кнопка вернуться наверх -->
<button id="back-to-top" title="Наверх">Наверх</button>
Мы создали простую разметку с длинным параграфом, который имитирует контент большого размера. Далее добавляем кнопку с идентификатором back-to-top.
Стили для кнопки «Наверх»
Описывая стили для нашей кнопки, прописываем ей фиксированное положение внизу справа, прозрачность фона, стиль отображения и эффект при наведении мыши. У вас стили будут индивидуальные.
/* Стили для кнопки */
#back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #4CAF50;
color: #fff;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
visibility: hidden;
opacity: 0;
transition: all 0.5s ease-in-out;
}
#back-to-top.is-active{
visibility: visible;
opacity: 1;
}
#back-to-top:hover {
background-color: #3e8e41;
}
Написание шаблона для создания экземпляра «кнопка Наверх»
class BackToTop {
constructor(el, opts = {}) {
// Проверка елемента на его тип, и коррекция...
if (typeof el === 'string') {
this.button = document.querySelector(el);
} else if (el instanceof Element) {
this.button = el;
} else {
throw new Error('Неверный тип аргумента');
}
if (!this.button) {
throw new Error('Элемент не найден');
}
// Дефолтные опции
const defaultConfig = {
breakpoint: 500,
activeClass: "is-active",
};
this.options = Object.assign(defaultConfig, opts);
this.listener();
}
// Функция прокрутки
scrollToTop(e) {
window.scrollTo({ top: 0, behavior: 'smooth' });
}
// Отслеживание кликов и скролинга
listener() {
this.button.addEventListener("click", (e) => this.scrollToTop(e));
window.addEventListener("scroll", (e) => this.checkPosition(e));
}
// Функция реагирования на положение скролинга
checkPosition(e) {
if (window.scrollY > this.options.breakpoint) {
this.button.classList.add(this.options.activeClass);
} else {
this.button.classList.remove(this.options.activeClass);
}
}
}
Здесь мы описываем методы нашего класса, с помощью которых будет происходить функционирование нашей кнопки.
Чтобы инициализировать данный шаблон, добавьте следующий код:
const BackToTopBtn = document.querySelector("#back-to-top");
BackToTopBtn && new BackToTop(BackToTopBtn,{
// Рубеж в пикселях от верха экрана, при котором срабатывает появление и исчизновение кнопки
breakpoint: 200,
// Активный класс, который добавляется при прохождении рубежа (breakpoint)
activeClass: "is-active",
});
Ссылки
Пример кода вы можете скачать с нашего репозитория на GitHub: https://github.com/Webpolka/BackToTop
Перейти на странцу с примером https://webpolka.github.io/BackToTop/
Заключение
Несмотря на свою кажущуюся простоту, кнопка для прокрутки страницы наверх является важным элементом удобства пользователей. Она существенно улучшает взаимодействие с сайтом. Использование такого инструмента помогает снизить нагрузку на глаза, упростив перемещение между разделами больших страниц.
Сегодня почти невозможно представить современный веб-сайт без подобного элемента интерфейса, поскольку удобство пользователя становится всё важнее в условиях растущей конкуренции среди онлайн-ресурсов.
