» »

Кнопка "Наверх" для сайта CSS3 + JQuery

Кнопка "Наверх" для сайта CSS3 + JQuery

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

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

Так она визуально смотрится на ресурсе в зеленом цвете.

Зеленая кнопка вверх на сайт uCoz

Здесь уже в синем, что выставлено и по установке под таким будет.

Синее кнопка наверх для сайта

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

Этот скрипт ставим в низ сайта:

Код
<script src="http://zornet.ru/zorner_ru_1/Abter/knopki/material-scrolltop.js"></script>  
  <button class="material-scrolltop" type="button"></button>  
  <script>  
  $(document).ready(function() {  
  $('body').materialScrollTop({  
  revealElement: 'header',  
  revealPosition: 'bottom',  
  onScrollEnd: function() {  
  console.log('Scrolling End');  
  }  
  });  
  });  
  </script>

В стили CSS прописываем:

Код
.material-scrolltop {
cursor:pointer;  
  display: block;  
  position: fixed;  
  width: 0;  
  height: 0;  
  bottom: 23px;  
  right: 23px;  
  padding: 0;  
  overflow: hidden;  
  outline: none;  
  border: none;  
  border-radius: 2px;  
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);  
  cursor: hand;  
  border-radius: 50%;  
  background: #4c73af;  
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);  
  -webkit-transition: all 0.3s cubic-bezier(0.25, 0.25, 0, 1);  
  -ms-transition: all 0.3s cubic-bezier(0.25, 0.25, 0, 1);  
  -moz-transition: all 0.3s cubic-bezier(0.25, 0.25, 0, 1);  
  -o-transition: all 0.3s cubic-bezier(0.25, 0.25, 0, 1);  
  transition: all 0.3s cubic-bezier(0.25, 0.25, 0, 1);  
}  

.material-scrolltop:hover {  
  background-color: #4c73af;  
  text-decoration: none;  
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5), 0 3px 15px rgba(0, 0, 0, 0.5);  
}  

.material-scrolltop::before {  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  -webkit-transform: translate(-50%, -50%);  
  -ms-transform: translate(-50%, -50%);  
  -moz-transform: translate(-50%, -50%);  
  -o-transform: translate(-50%, -50%);  
  transform: translate(-50%, -50%);  
  content: "";  
  width: 0;  
  border-radius: 100%;  
  background: #415d8a;  
}  

.material-scrolltop:active::before {  
  width: 120%;  
  padding-top: 120%;  
  -webkit-transition: all 0.2s ease-out;  
  -ms-transition: all 0.2s ease-out;  
  -moz-transition: all 0.2s ease-out;  
  -o-transition: all 0.2s ease-out;  
  transition: all 0.2s ease-out;  
}  

.material-scrolltop.reveal {  
  width: 56px;  
  height: 56px;  
}  

.material-scrolltop span {  
  display: block;  
  font-size: 25px;  
  color: #fff;  
}  

.material-scrolltop,  
.material-scrolltop::before {  
  background-image: url(http://zornet.ru/zorner_ru_1/Abter/knopki/top-arrow.svg);  
  background-position: center 50%;  
  background-repeat: no-repeat;  
}

На этом вся установка, что ссылка в стилях идет, она как раз отвечает за светлую стрелку, здесь точно не скажу, подойдет формат PNG, чтоб можно было поменять на что то оригинальное.
19.07.2017 Просмотров: 469 Комментарий: (4)

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

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

Комментарий: 4
Scheme
Scheme 21.07.2017 20:021
0
Это хорошая кнопка и сильно отличается от других. Просто у нее эффект есть, а другие просто вверх подняли и исчезли, это отъезжает.
Kosten
Kosten 21.07.2017 20:082
0
Так пока и оставил на тестовом сайте, возможно на этот поставлю, то эта кнопка немного глючная, что установлена сейчас, бывает не показывается, пока клик не сделать.
Critic©
Critic© 05.08.2017 20:533
0
Довольно простая кнопка "вверх" для сайтов.
Kosten
Kosten 05.08.2017 21:194
0
Не сказал, что она простая, если бы простая была, то только файл JS шел и ссылка на картинку, что недавно ЗДЕСЬ залил, так там можно на сервис вывести уникальную кнопку. Здесь есть красивый эффект, и в этом они отличаются от других.
avatar