codeСкрипты JS fiber_newНовое

Кнопка «Наверх» для uCoz

Плавающая кнопка для прокрутки страницы вверх — появляется при скролле вниз и плавно возвращает на начало

calendar_today6 апреля 2025 visibility1 234 просмотра timer~2 мин. на установку

infoЧто делает этот скрипт

Добавляет на страницу кнопку «↑», которая появляется когда пользователь прокручивает страницу вниз более 300px. При клике — плавно скроллит страницу к самому верху. Работает на всех страницах uCoz, не конфликтует с другими скриптами.

javascriptJavaScript — вставить перед </body>

back-to-top.js

// Кнопка «Наверх» для uCoz | uCoz Сборник
(function() {
 var btn = document.createElement('button');
 btn.id = 'uc-back-top';
 btn.innerHTML = '↑';
 btn.title = 'Наверх';
 document.body.appendChild(btn);

 window.addEventListener('scroll', function() {
 btn.style.opacity = window.scrollY > 300 ? '1' : '0';
 btn.style.pointerEvents = window.scrollY > 300 ? 'auto' : 'none';
 });

 btn.addEventListener('click', function() {
 window.scrollTo({ top: 0, behavior: 'smooth' });
 });
})();

paletteCSS — вставить в таблицу стилей

back-to-top.css

#uc-back-top {
 position: fixed;
 bottom: 30px;
 right: 30px;
 width: 46px;
 height: 46px;
 border-radius: 50%;
 background: linear-gradient(135deg, #6366f1, #8b5cf6);
 color: #fff;
 border: none;
 font-size: 20px;
 font-weight: bold;
 cursor: pointer;
 opacity: 0;
 pointer-events: none;
 transition: opacity 0.3s, transform 0.2s;
 z-index: 9999;
 box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
 line-height: 1;
}
#uc-back-top:hover {
 transform: translateY(-3px);
 box-shadow: 0 8px 25px rgba(99, 102, 241, 0.6);
}

Как установить

1
Открой редактор шаблонов uCoz
Панель управления → Дизайн → Редактор шаблонов
2
Вставь CSS в таблицу стилей
Общие шаблоны → Таблица стилей (CSS) — добавь в конец
3
Вставь JS в подвал сайта
Глобальные блоки → Нижняя часть сайта — добавь JS перед </body>
4
Сохрани и проверь
Нажми «Сохранить» в каждом шаблоне и проверь на сайте

check_circle

Готово! Прокрути вниз — кнопка должна появиться. Если нет — проверь консоль браузера (F12) на синтаксические ошибки.

warning

Важно: Не вставляй JS в <head> — это замедлит загрузку страницы. Скрипты всегда вставляй перед </body>.

Теги: JavaScript UX скролл кнопка копипаст uCoz

123