| Меню сайта |
|
 |
| Категории раздела |
|
|
| Популярное |
|
|
|
| Мини-чат |
|
|
|
| Наш опрос |
Оцените мой сайт
Всего ответов: 7
|
|
| Статистика |
Онлайн всего: 1 Гостей: 1 Пользователей: 0 |
|
|
Прокрутка страниц вверх на чистом CSS
| 19.10.2020, 22:19 |
Прокрутка страниц вверх на чистом CSS
В этой статье представлен материал для поднятия страницы на сайтах, где идет кнопка вверх в правом нижнем углу, которая создана с помощью HTML и CSS. Где вам не нужно приписывать скриптов, а просто выставить стили, где в последствии в низ сайта или на отдельной страницы поставить код. Если, что из стилистики нужно задействовать, так это шрифтовые кнопки, где мы наблюдаем, что у нас поставлена стандартная стрелка. Также и по скорости, вся функциональность происходит в закрепленном CSS.
Так как по сути такого материалу много можно найти, но здесь понравилось, что все заточено на стилистику, как функция поднятие страницы, там полностью оформление кнопки, что очень быстро и удобно для пользователя. Где можно самостоятельно что-то от себя добавить по дизайну или кардинально поменять вид кнопки, так, чтоб соответствовала основному стилю на сайте.
По умолчанию идет такой вид кнопки, что в темном оттенке, где по возможности можно сделать темно прозрачной и сменить фигуру или шрифтовую иконку, что расположена по центру.
Как сделать кнопку «наверх» для сайта
Вы могли видеть на многих веб-сайтах, есть функция Scroll Top или Back To Top Button, которая создается с использованием HTML, CSS и Javascript. Это довольно хорошая функция, которая сэкономит несколько секунд вашим посетителям или пользователям.
Шрифтовые кнопки
Код
Код <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
HTML
Код
Код <div class="akeconsa-udaneles"> <a href="#" title="Поднять страницы на сайтах вверх"><span class="fas fa-angle-up"></span></a> </div>
CSS
В стилях CSS идет стилизованный значок, сделано для того, чтобы создать верхнюю кнопку прокрутки. Где с селекторе HTML помещен внутри него scroll-behavior: smooth; значение для отображения плавного эффекта при нажатии кнопки.
Код
Код html{
scroll-behavior: smooth;
}
.akeconsa-udaneles{
position: fixed;
bottom: 28px;
right: 28px;
z-index: 9;
}
.akeconsa-udaneles a {
height: 42px;
width: 42px;
text-align: center;
background: #151414;
display: block;
border-radius: 2px;
}
.akeconsa-udaneles a span {
color: #f7f0f0;
font-size: 30px;
line-height: 42px;
cursor: pointer;
}
В настоящее время в каждом блоге и на каждом веб-сайте есть кнопка быстрого перехода к началу веб-страницы. Когда мы читаем или смотрим контент на веб-сайте, мы начинаем прокрутку вниз, чтобы увидеть больше контента, но много раз мы хотим вернуться на верхнюю часть.
Демонстрация
| После регистрации у вас появиться еще одна ссылка для бесплатного скачивания и пропадет рекламма!
|
Категория: Скачать Скрипты для Ucoz | Добавил: Marco |
| Просмотров: 125 | Загрузок: 0
| Рейтинг: 0.0/0 |
Добавлять комментарии могут только зарегистрированные пользователи. [ Регистрация | Вход ] |
|
| Вход на сайт |
|
|
| Поиск |
|
|
| Популярное |
|
|
| Популярное |
|
|
|
|
