ZorNet.Ru — сайт для вебмастера » HTML и CSS » Прокрутка страниц вверх на чистом CSS

Прокрутка страниц вверх на чистом CSS

В этой статье представлен материал для поднятия страницы на сайтах, где идет кнопка вверх в правом нижнем углу, которая создана с помощью HTML и CSS. Где вам не нужно приписывать скриптов, а просто выставить стили, где в последствии в низ сайта или на отдельной страницы поставить код. Если, что из стилистики нужно задействовать, так это шрифтовые кнопки, где мы наблюдаем, что у нас поставлена стандартная стрелка. Также и по скорости, вся функциональность происходит в закрепленном CSS.

Так как по сути такого материалу много можно найти, но здесь понравилось, что все заточено на стилистику, как функция поднятие страницы, там полностью оформление кнопки, что очень быстро и удобно для пользователя. Где можно самостоятельно что-то от себя добавить по дизайну или кардинально поменять вид кнопки, так, чтоб соответствовала основному стилю на сайте.

По умолчанию идет такой вид кнопки, что в темном оттенке, где по возможности можно сделать темно прозрачной и сменить фигуру или шрифтовую иконку, что расположена по центру.

Как сделать кнопку «наверх» для сайта

Вы могли видеть на многих веб-сайтах, есть функция Scroll Top или Back To Top Button, которая создается с использованием HTML, CSS и Javascript. Это довольно хорошая функция, которая сэкономит несколько секунд вашим посетителям или пользователям.

Шрифтовые кнопки

Код

HTML

Код

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;
}

В настоящее время в каждом блоге и на каждом веб-сайте есть кнопка быстрого перехода к началу веб-страницы. Когда мы читаем или смотрим контент на веб-сайте, мы начинаем прокрутку вниз, чтобы увидеть больше контента, но много раз мы хотим вернуться на верхнюю часть.

Демонстрация

05 Сентября 2020 Загрузок: 3 Просмотров: 2510 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0