» »

Кнопка вверх как вконтакте в HTML + CSS

Кнопка вверх как вконтакте в HTML + CSS

Этот вариант кнопки аналогичен варианту, как на сайте в контакте, что также идет функция по левой стороне, где появляется при спуске страницы. Отличный и удобный функционал сделан на этой кнопки, так как по вверх еще можно написать несколько знаков и поставить кнопку. В нашем материале идет без кнопки, так как очень много места занимает, хотя с надписью "ВВЕРХ", где веб-разработчик может переписать на свою.

Если вам нужно с кнопкой, как ниже можно посмотреть на элемент, то скачиваем архив, и в нем найдете текстовый документ, где представлен полноценный стиль. Если говорить про скольжение, то оно плавное, где красиво, кок сделаете клик, страница поднимется.

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

Так выглядит элемент после как все установите.

Кнопка вверх с плавной скроллом в CSS

Приступаем к установке:

HTML

Код
<!-- <Вверх> -->  
<script type="text/javascript">
$('body').append('<div class="besamogas"></div>');  
$(window).scroll(function() {
  if ($(this).scrollTop() > 100) {
  $('.besamogas').css({
  left: '0'
  });
  } else {
  $('.besamogas').css({
  left: '-100px'
  });
  }
});
$('.besamogas').on('click',function() {
  $('html, body').animate({
  scrollTop: 0
  }, 500);
  return false;
});
</script>

CSS

Код
.besamogas {
  z-index: 9999;
  width: 100px;
  height: 100%;
  color: #FFF;
  position: fixed;
  top:0;
  left:-100px;
  cursor: pointer;
  transition: all .5s ease-in-out;
  background: rgba(33, 87, 152, 0.56);
}
.besamogas:before {
  content: "ВВЕРХ";
  display:block;
  position:absolute;  
  text-align:center;
  color: #FFF;
  font-size:36px;
  line-height:100px;
  font-weight:bold;
  height:100%;
  vertical-align:center;
  writing-mode:tb-rl;
  transform: rotate(180deg);
}

.besamogas:hover {
background: rgba(23, 74, 136, 0.68);
}

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

Хоть это не очень важно, так как основном ресурсы идут в заданной ширине, но есть форумы, что дизайн расположен на всю ширину, что такая кнопки не очень подойдет. Хотя если ее красиво оформить, то можно под любой модуль ее поставить с оригинальным стилем.
2018-12-25 Загрузок: 1 Просмотров: 325 Комментарий: (3)

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

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

Комментарий: 3
Kosten
Kosten 2018-12-25 02:241
0
Кто предпочитает стандартные кнопки с красивым эффектом появление и аналогично с исчезновением, то эта кнопка будет отличным вариантом для любого тематического сайта, что для светлого или для темного.
VIP36RUS
VIP36RUS 2018-12-26 17:562
0
Добавил себе на основе этого скрипта

Kosten
Kosten 2018-12-26 18:383
0
Норм так получилось, но лучше в прозрачном формате.
avatar