Как добавить кнопку «Наверх» с индикатором прогресса прокрутки страницы
Добавление кнопки «Наверх» с индикатором прокрутки на сайт
Кнопка «Наверх» с индикатором прокрутки позволяет пользователям легко вернуться к началу страницы и наглядно показывает, сколько контента уже просмотрено. Эта функция улучшает пользовательский опыт, особенно на длинных страницах.
Зачем нужна кнопка «Наверх»?
На длинных страницах пользователям может быть неудобно вручную прокручивать страницу вверх. Кнопка «Наверх» решает эту проблему, добавляя следующие преимущества:- ✅ Удобная навигация: Быстрый доступ к началу страницы.
- ✅ Визуализация прогресса: Индикатор показывает, сколько страницы уже прокручено.
- ✅ Плавная прокрутка: Мягкое и комфортное возвращение к верху страницы.
🛠️ Шаг 1: Добавление HTML-разметки
Вставьте следующий код перед закрывающим тегом</body>:
<!-- Кнопка прокрутки вверх -->
<div id="scrollTopButton">
<svg class="progress-circle" width="60" height="60" viewBox="0 0 60 60">
<circle class="track" cx="30" cy="30" r="28"></circle>
<circle class="progress" cx="30" cy="30" r="28"></circle>
</svg>
<div class="arrow">▲</div>
</div>🎨 Шаг 2: Добавление CSS-стилей
Добавьте следующий CSS-код в файл стилей вашего сайта или в блок<style> в <head>:
/* Кнопка "Наверх" */
#scrollTopButton {
position: fixed;
bottom: 30px;
right: 30px;
width: 60px;
height: 60px;
background: rgba(255, 255, 255, 0.9);
border-radius: 50%;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: opacity 0.3s ease, transform 0.3s ease;
}
#scrollTopButton.hidden {
opacity: 0;
pointer-events: none;
transform: translateY(20px);
}
/* Стрелка */
#scrollTopButton .arrow {
font-size: 16px;
color: #FF3D3D;
position: absolute;
z-index: 2;
}
/* Индикатор прокрутки */
#scrollTopButton svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
#scrollTopButton .track {
fill: none;
stroke: #e6e6e6;
stroke-width: 4;
}
#scrollTopButton .progress {
fill: none;
stroke: #FF3D3D;
stroke-width: 4;
stroke-dasharray: 176;
stroke-dashoffset: 176;
transition: stroke-dashoffset 0.3s ease;
}⚙️ Шаг 3: Добавление JavaScript
Подключите следующий JavaScript перед закрывающим тегом</body>:
document.addEventListener('DOMContentLoaded', () => {
const scrollTopButton = document.getElementById('scrollTopButton');
const progressCircle = document.querySelector('#scrollTopButton .progress');
if (!progressCircle) {
console.error('Элемент .progress не найден. Проверьте структуру HTML.');
return;
}
const circleRadius = progressCircle.r.baseVal.value; // Радиус окружности
const circumference = 2 * Math.PI * circleRadius; // Окружность круга
// Устанавливаем начальные значения индикатора
progressCircle.style.strokeDasharray = `${circumference}`;
progressCircle.style.strokeDashoffset = `${circumference}`;
// Отслеживаем прокрутку
window.addEventListener('scroll', () => {
let scrollTop = window.scrollY || document.documentElement.scrollTop;
let scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
let progress = scrollTop / scrollHeight;
let dashOffset = circumference - (circumference * progress);
progressCircle.style.strokeDashoffset = dashOffset;
// Показываем/скрываем кнопку
if (scrollTop > 100) {
scrollTopButton.classList.remove('hidden');
} else {
scrollTopButton.classList.add('hidden');
}
});
// Прокрутка вверх по клику
scrollTopButton.addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
});✅ Проверка работы
Откройте страницу сайта и убедитесь, что:- Кнопка появляется при прокрутке страницы вниз.
- Индикатор заполняется плавно при прокрутке.
- Страница плавно прокручивается вверх при нажатии на кнопку.