Сегодня мы рассмотрим пример, в котором реализуем кнопку «Вернуться наверх». Основная задача данной кнопки — это прокрутка содержимого страницы наверх, то есть в начало. Этот элемент является распространенным и необходимым. Он служит для удобств навигации по сайту для пользователя. Подобные элементы делают ваш сайт, живым и дружелюбным к посетителю. Традиционно составим небольшой план, согласно нему будем двигаться и попутно разбирать, что же происходит на каждом этапе:
- Стартовый шаблон
- Разметка нашей кнопки
- Стили для кнопки «Вернуться наверх»
- Скрипт для функционирования модуля
- Готовый код
Стартовый шаблон.
Создадим стартовый HTML шаблон, с помощью восклицательного знака и клавиши Tab (если в вашем редакторе кода предустановлен emet). Далее пропишем теги <style> и <script>, в которых у нас будут расположены стили и скрипт. Почему я начинаю, статью со стартового шаблона? Ответ прост! Я хочу чтобы информация в статье, была понятна и доступна к пониманию, абсолютно для всех. Ниже приведена стартовая разметка, с которой мы начнем нашу работу:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>КНОПКА НАВЕРХ !</title>
</head>
<style>
/* --- Здесь опишем стили --- */
</style>
<body>
<!-- --- Здесь напишем разметку --- -->
<script>
// --- Здесь напишем скрипт ---
</script>
</body>
</html>
Разметка кнопки «Наверх».
И так первое, с чем мы будем работать — это собственно разметка. Значит займемся разметкой кнопки. Создадим служебный контейнер с классом .container для выравнивания и внутри этого контейнера создадим заголовок <h1>. В этот заголовок поместим какой-нибудь текст, для наглядности. Также создадим контейнер с классом .go-top и id =’goTop’. Это собственно и будет элемент, с которым мы будем взаимодействовать средствами JavaScript.
Но это еще не все ! Теперь нам необходима иконка со стрелкой указывающей вверх. Будем использовать <svg>. Для этого идем на любой сайт, где можно раздобыть svg иконку и копируем её в буфер обмена. Я использую Font Awesome, но это не панацея. Вы можете воспользоваться любым другим сервисом. Возвращаемся в редактор кода и вставляем содержимое в наш контейнер, c классом .go-top. На этом работу над разметкой кнопки «Вернуться наверх», можно считать оконченной. И вот что у нас получилось:
<div class="container">
<h1>Прокрути бегунок вниз чтоб оценить работу скрипта !</h1>
<div class="go-top" id="goTop">
<svg xmlns="" viewBox="0 0 384 512">
<path d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2 160 448c0 17.7 14.3 32 32 32s32-14.3 32-32l0-306.7L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z" />
</svg>
</div>
</div>
Стили кнопки «Вернуться наверх».
Далее мы пропишем стили для нашего блока с кнопкой. В стилях я, как обычно, буду использовать переменные, потому что, такой способ стилизации гибкий и дает возможность быстро настраивать внешний вид кнопки. Вам достаточно поменять значения переменных и кнопка тут же преображается по вашему вкусу. Я считаю это удобным ! В значениях мы зададим размер, цвет иконки, а также цвет иконки при наведении курсора и закругление. Думаю для кнопки этого будет достаточно.
Еще мы опишем класс .go-top—show, который будет делать нашу кнопку видимой или невидимой, в зависимости от положения скроллинга на странице. В .container у нас имеется {min-height: 250vh;} , и как вы правильно догадались — это просто имитация контента. В реальном проекте у вас будет реальный контент, и это свойство вам не понадобиться. Вот такие вот стили у нас получились:
<style>
.container {
max-width: 1200px;
margin: 0 auto;
padding-left: 1rem;
padding-right: 1rem;
min-height: 250vh;
}
.go-top {
--size: 1.5rem;
--color: rgb(251, 248, 248);
--color-hover: rgb(55, 47, 47);
--bg-color: rgb(9, 251, 5);
--transition: all 0.3s ease-in-out;
--radius: 0.25rem;
position: fixed;
right: 10%;
bottom: 10%;
z-index: -100;
cursor: pointer;
visibility: hidden;
opacity: 0;
transition: var(--transition);
background-color: var(--bg-color);
border-radius: var(--radius);
padding: var(--size);
}
.go-top svg {
width: var(--size);
height: var(--size);
fill: var(--color);
transition: var(--transition);
}
.go-top:hover svg {
fill: var(--color-hover);
transition: var(--transition);
}
.go-top--show {
z-index: 9999;
transition: var(--transition);
visibility: visible;
opacity: 1;
}
</style>
Скрипт для функционирования модуля.
Переходим к написанию скрипта. Скрипт организуем в виде класса, что сделает его удобным в использовании. Всего два аргумента будем передавать в наш класс — это id нашей кнопки, и класс видимости кнопки (в нашем случае это .go-top—show). Всю логику опишем в одном методе goTop(), потому что, чем проще, тем лучше. Основные события отметим комментариями.
<script>
class GoTop {
// --- передаем аргументы в конструктор ID кнопки и класс скрытия ---
constructor(containerID, visibleClass) {
this.btn = document.getElementById(containerID);
this.showClass = visibleClass;
}
// --- метод отслеживает положение скроллинга и клик по кнопке ---
gotop() {
window.addEventListener("scroll", () => {
let scrolled = window.pageYOffset;
let coords = document.documentElement.clientHeight;
scrolled > coords ?
this.btn.classList.add(this.showClass) :
this.btn.classList.remove(this.showClass);
});
this.btn.addEventListener("click", () => {
window.pageYOffset > 0 ? window.scrollTo({ top: 0, behavior: 'smooth' }) : ''
});
}
// --- инициализируем метод ---
init() {
this.gotop();
}
}
// --- Присваиваем новой переменной наш объект, ---
// --- передаем в него 2 аргумента и инициализируем его---
let goTop = new GoTop(
'goTop', // -- ID контейнера
'go-top--show' // -- класс показать кнопку
).init()
</script>
Готовый код кнопки «Вернуться наверх».
Ну вот наша сегодняшняя статья и подошла к завершению, и нам лишь осталось собрать все кусочки в один файл index.html, чтобы запустить его в браузере и оценить результат проделанной работы:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>КНОПКА НАВЕРХ !</title>
</head>
<style>
.container {
max-width: 1200px;
margin: 0 auto;
padding-left: 1rem;
padding-right: 1rem;
min-height: 250vh;
}
.go-top {
--size: 1.5rem;
--color: rgb(251, 248, 248);
--color-hover: rgb(55, 47, 47);
--bg-color: rgb(9, 251, 5);
--transition: all 0.3s ease-in-out;
--radius: 0.25rem;
position: fixed;
right: 10%;
bottom: 10%;
z-index: -100;
cursor: pointer;
visibility: hidden;
opacity: 0;
transition: var(--transition);
background-color: var(--bg-color);
border-radius: var(--radius);
padding: var(--size);
}
.go-top svg {
width: var(--size);
height: var(--size);
fill: var(--color);
transition: var(--transition);
}
.go-top:hover svg {
fill: var(--color-hover);
transition: var(--transition);
}
.go-top--show {
z-index: 9999;
transition: var(--transition);
visibility: visible;
opacity: 1;
}
</style>
<body>
<div class="container">
<h1>Прокрути бегунок вниз чтоб оценить работу скрипта !</h1>
<div class="go-top" id="goTop">
<svg xmlns="" viewBox="0 0 384 512">
<path d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2 160 448c0 17.7 14.3 32 32 32s32-14.3 32-32l0-306.7L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z" />
</svg>
</div>
</div>
<script>
class GoTop {
// --- передаем аргументы в конструктор ID кнопки и класс скрытия ---
constructor(containerID, visibleClass) {
this.btn = document.getElementById(containerID);
this.showClass = visibleClass;
}
// --- метод отслеживает положение и клик ---
gotop() {
window.addEventListener("scroll", () => {
let scrolled = window.pageYOffset;
let coords = document.documentElement.clientHeight;
scrolled > coords ?
this.btn.classList.add(this.showClass) :
this.btn.classList.remove(this.showClass);
});
this.btn.addEventListener("click", () => {
window.pageYOffset > 0 ? window.scrollTo({ top: 0, behavior: 'smooth' }) : ''
});
}
// --- инициализируем метод ---
init() {
this.gotop();
}
}
// --- Присваиваем новой переменной наш объект, ---
// --- передаем в него 2 аргумента и инициализируем его---
let goTop = new GoTop(
'goTop', // -- ID контейнера
'go-top--show' // -- класс показать кнопку
).init()
</script>
</body>
</html>
PostScriptum: HTML с английского HyperText Markup Language — что переводиться как «язык гипертекстовой разметки». Стандартизированный язык гипертекстовой разметки документов для просмотра веб-страниц. Браузеры получают HTML документ от сервера по протоколам HTTP или HTTPS, интерпретируют код в интерфейс и отображают на экране вашего монитора.
Всем добра ! Задавайте вопросы и оставляйте комментарии.
DEMO
