Один из распространённых паттернов в интернете — кнопка «наверх», которая плавно прокручивает страницу к началу. Обычно для этого используется JS-плагин или пишется небольшой скрипт с вызовом метода
scroll* и Web Animations API.Темани Афиф придумал способ сделать такую кнопку на CSS. Понадобится grid, sticky-позиционирование и немного хитростей. Вот весь код:
<body>
<div>
<header id="top">
<!-- шапка страницы -->
</header>
<!-- остальной контент -->
</div>
<a href="#top">Наверх</a>
</body>
body {
display: grid;
grid-template-columns: auto 0px;
}
@media (prefers-reduced-motion: no-preference) {
body {
scroll-behavior: smooth;
}
}
a[href="#top"] {
--offset: 50px;
position: sticky;
bottom: 20px;
margin-right: 10px;
place-self: end;
margin-top: calc(100vh + var(--offset));
}В
<body> создаётся сетка из двух колонок: для контента и кнопки. Колонка с кнопкой получает нулевую ширину. Кнопка смещается на высоту области просмотра и ещё некоторое дополнительное расстояние. При прокрутке прилипает к нижней части экрана.Получается то что нужно: вверху страницы кнопка не видна, но появляется при прокрутке на указанное в
--offset расстояние и прилипает к нижней части страницы. Саму кнопку при этом можно свободно стилизовать.В качестве «кнопки» используется элемент ссылки
<a> с фрагментом #top. При нажатии браузер прокрутит страницу к элементу с атрибутом id="top", в примере это <header>. Причём не просто прокрутит, а перенесёт туда фокус.Свойство
scroll-behavior: smooth у <body> сделает прокрутку плавной, но только если пользователь не предпочёл уменьшить количество движений в настройках ОС. Пользовательские предпочтения нужно уважать.Получается вполне интересное, не сложное и функциональное решение для кнопки «наверх» без применения JS. Подробнее о нём можно почитать в статье Темани Афифа «How to Make an Animated Back to Top Button Using Only CSS».
#css #ui
