Django-кнопка «Наверх»: подключить за минуту вместо очередного велосипеда
Кнопка «Наверх» — небольшая вещь, о которой обычно вспоминают на длинной странице.
Каталог товаров, документация, блог, личный кабинет, длинная форма или Django Admin: пользователь пролистал вниз, а потом ему нужно вернуться к началу. Можно снова прокручивать страницу вручную. А можно нажать одну небольшую кнопку.
Обычно её делают прямо в проекте: немного HTML, CSS, JavaScript — и всё работает. Потом тот же код копируется в следующий проект, меняется цвет, размер, положение, добавляется адаптация под мобильные устройства. Где-то кнопку перекрывает чат, где-то cookie-баннер, где-то хочется видеть её ещё и в админке.
Я собрал это в отдельное Django-приложение — django-scroll-to-top.
Это готовый компонент, который можно поставить на обычные страницы Django-сайта и, при необходимости, в стандартный Django Admin.
Подключение
После установки пакета и миграций достаточно добавить приложение в INSTALLED_APPS:
INSTALLED_APPS = [ # ... "django_scroll_to_top", ]
А в базовый шаблон вставить template tag:
{% load scroll_to_top %}
{% scroll_to_top %}
Кнопка появится там, где она действительно нужна: на длинной странице, после прокрутки вниз.
Для работы не требуется jQuery, отдельный frontend-сборщик или внешние CDN. Это обычное Django-приложение, которое можно подключить к проекту без перестройки его архитектуры.
Можно использовать и в Django Admin
На сайте кнопка полезна посетителям. Но длинные формы и большие списки объектов бывают и у администратора.
Например, в Django Admin она может пригодиться при работе с карточками товаров, статьями, настройками, большим количеством полей или длинными таблицами.
Для этого в модуле есть отдельное включение для админки. Настройки сайта и Django Admin не смешиваются: можно сделать разные варианты оформления и поведения.
Не нужно каждый раз переписывать CSS
Внешний вид и поведение можно настроить через админку.
Например, выбрать:
- угол экрана;
- круглую, квадратную или скруглённую форму;
- вариант с одной иконкой либо с подписью;
- размер, цвета, границу и тень;
- отступы от края экрана;
- момент, когда кнопка должна появляться;
- плавную или мгновенную прокрутку;
- отдельные настройки для мобильных устройств.
Есть черновики, публикация изменений, копирование конфигурации и откат к предыдущей версии. То есть изменения можно сначала посмотреть, а потом применить.
Иконку тоже можно выбрать
Внутри уже есть набор иконок Tabler Icons. Для обычного случая можно просто выбрать стрелку, которая подходит по стилю сайту.
Также можно добавить свою SVG-иконку. При этом SVG не вставляется на страницу без проверки: модуль очищает содержимое, чтобы изменение внешнего вида через админку не становилось способом случайно добавить на сайт небезопасный код.
Что ещё учтено
Кнопка кажется очень простой, пока не начинаешь пользоваться ею в реальном проекте.
В модуле предусмотрены базовые сценарии, которые обычно приходится доделывать вручную:
- поддержка клавиатурной навигации;
- заметный фокус для пользователей, работающих без мыши;
- учёт настройки уменьшения анимации;
- обычная ссылка на начало страницы как резервный сценарий;
- поведение на мобильных экранах;
- возможность учитывать фиксированную шапку;
- настройка взаимодействия с другими плавающими элементами интерфейса.
Например, если на странице есть cookie-баннер, чат поддержки или мобильная нижняя панель, их можно обозначить как препятствия. Кнопка не обязана стоять строго в одном углу и перекрывать интерфейс.
Когда это может пригодиться
django-scroll-to-top пригодится в проектах, где есть длинные страницы:
- интернет-магазинах и каталогах;
- блогах и корпоративных сайтах;
- документации;
- личных кабинетах;
- внутренних CRM и административных системах;
- стандартном Django Admin.
Конечно, кнопку «Наверх» можно написать самостоятельно. Но если она нужна больше чем в одном месте, проще подключить готовый компонент и не переносить очередной фрагмент CSS и JavaScript между проектами.
Проект пока находится в ветке 0.x, поэтому обратная связь особенно полезна: интересны реальные сценарии, нестандартные Django Admin, темы оформления, cookie-баннеры, чаты и мобильные интерфейсы.