Простой, но стильный компонент для любого сайта — показывает прогресс прокрутки и позволяет быстро вернуться наверх.
✅ Улучшенная логика расчёта + максимальная производительность.

✅ Плавающий индикатор прокрутки вверху страницы
✅ Кнопка "Наверх" в правом нижнем углу
✅ Мгновенное обновление индикатора (без задержки)
✅ Плавная прокрутка к началу страницы
✅ Адаптивный дизайн — работает на любом устройстве
✅ Улучшенная логика расчёта прогресса (учитывает крайние случаи)
✅ Использование passive: true для максимальной производительности

src/
├── App.jsx          ← Главный компонент
├── ProgressBar.jsx  ← Индикатор прокрутки
└── styles.css       ← Базовые стили

1. Прокрути страницу вниз → появится синяя полоска вверху
2. Нажми кнопку ⬆️ в правом нижнем углу → страница плавно вернётся наверх
3. Обнови страницу → индикатор сбросится, но кнопка останется

Индикатор использует useEffect и useState для отслеживания прокрутки.
Расчёт процента выполняется по формуле:

const totalScrollable = docHeight - winHeight;
const percent = Math.min(100, Math.max(0, (scrollTop / totalScrollable) * 100));

Кнопка "Наверх" использует нативный метод:

element.scrollIntoView({ behavior: 'smooth' });

Для максимальной производительности обработчик скролла подключается с опцией:

{ passive: true }

Это учебный проект, созданный для понимания:

• Работы с событием scroll
• Расчёта прогресса прокрутки
• Использования useRef и useEffect
• Создания удобных UI-элементов

В будущем можно добавить:

• Цветовую анимацию индикатора
• Анимацию появления кнопки
• Отображение процента рядом с полоской

Создано в рамках обучения React.
Подходит для начинающих, кто хочет понять, как работают эффекты, референсы и DOM-манипуляции.

git clone https://github.com/yourname/your-repo.git
cd your-repo
npm install
npm run dev

Если понравилось — ставь ⭐ и делай fork!
Вопросы и предложения — в Issues.