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

Кнопка вверх с исчезновением для сайта

Установив на сайт кнопку вверх, вы создали отличную функцию для пользователей, которые по одному клику могут поднять страницу к верхней части. А с этой кнопкой идет отличная анимация, которая заключается в том, когда страница полностью находится внизу, то кнопка автоматически исчезает. Но только стоит приподнять страницу, так она плавно появляется. Где при наведении становится шире, это еще один трюк, который закреплен за этим функционалом.

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

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

Так все выглядит, как только все поставите на интернет ресурсе.

Скрипт поднять страницу для сайта

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

Ставим в низ сайта, для того, чтоб наблюдать на всем ресурсе.

JS

Код

<script type="text/javascript">
$('body').append('<div class="dekoculanas"></div>');
$(window).scroll(function() {
  if ($(this).scrollTop() > 100) {
  $('.dekoculanas').css({
  transform: 'scale(1)'
  });
  } else {
  $('.dekoculanas').css({
  transform: 'scale(0)'
  });
  }
});
$('.dekoculanas').on('click',function() {
  $('html, body').animate({
  scrollTop: 0
  }, 500);
  return false;
});
</script>

CSS

Код

.dekoculanas {
  z-index: 9999;
  width: 50px;
  height: 50px;
  color: #f9f3f3;
  position: fixed;
  bottom: 15px;
  right: 15px;
  cursor: pointer;
  border: 2px solid #c3def3;
  border-radius: 50%;
  transform: scale(0);
  transition: all .7s ease-in-out;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #1a5d96;
  background-image: url(http://zornet.ru/ABVUN/Anisa/24640298.png);
  background-size: 70% auto;
}

.dekoculanas:hover {
  transform: scale(1.2)!important;
}

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

Источник: atuin.ru

18 Декабря 2018 Просмотров: 1025 Комментариев: (0)

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

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

Kosten

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