Скрипт “подняться вверх” на CSS3 и jQuery для uCoz

Скрипт “подняться вверх” на CSS3 и jQuery для uCoz

Чем проще навигация на вашем сайте, тем удобнее им пользоваться. Сегодня все чаще в рунете можно встретить кнопку “подняться вверх”. Она обычно появляется в нижнем углу сайта при скролле и прячется, если страница прокручивается вверх.

Установка




1. В таблицу стилей вставляем код:

Код
.cd-top {  
background-color: rgb(51, 122, 183);  
bottom: 0px;  
color: rgb(255, 255, 255);  
display: inline-block;  
font-size: 18px;  
line-height: 24px;  
position: fixed;  
opacity: 0;  
right: 0px;  
text-align: center;  
text-decoration: none;  
-webkit-transform: scale(5) translate(47px,-10px);  
-moz-transform: scale(5) translate(47px,-10px);  
-o-transform: scale(5) translate(47px,-10px);  
-ms-transform: scale(5) translate(47px,-10px);  
transform: scale(5) translate(47px,-10px);  
-webkit-transition: all 0.3s ease-in-out;  
-moz-transition: all 0.3s ease-in-out;  
-o-transition: all 0.3s ease-in-out;  
-ms-transition: all 0.3s ease-in-out;  
transition: all 0.3s ease-in-out;  
visibility: hidden;  
white-space: nowrap;  
width: 100%;  
}  
.cd-top.cd-is-visible, .no-touch .cd-top:hover {  
-webkit-transition: all 0.3s ease-in-out;  
-moz-transition: all 0.3s ease-in-out;  
-o-transition: all 0.3s ease-in-out;  
-ms-transition: all 0.3s ease-in-out;  
transition: all 0.3s ease-in-out;  
}  
.cd-top.cd-is-visible {  
opacity: 0.9;  
-webkit-transform: scale(1) translate(0px,0px);  
-moz-transform: scale(1) translate(0px,0px);  
-o-transform: scale(1) translate(0px,0px);  
-ms-transform:scale(1) translate(0px,0px);  
transform: scale(1) translate(0px,0px);  
visibility: visible;  
}  
.cd-top.cd-is-visible:hover {  
color: rgb(255, 255, 255);  
opacity: 1;  
}  
.cd-top:hover {  
text-decoration: none;  
}  
.cd-top .fa {  
padding: 25px 25px;  
}  
.cd-top span:last-child {  
padding: 25px 8px;  
}  
@media (min-width: 768px) {  
.cd-top {bottom: 90px;  
width: auto;  
right: -158px;  
}  
.cd-top:hover {  
right: 0px;  
}  
.cd-top .fa {  
border-right: 1px solid rgb(71, 142, 203);  
}  
}

2. А этот код в нижнюю часть сайта:

Код
<a href="#0" class="back-to-top cd-top"><span class="fa fa-chevron-up"></span> <span>Поднятся на верх</span></a><script>  
$(window).scroll(function() {  
  ($(this).scrollTop() > ($('header').height() + 200)) ? $('.back-to-top').addClass('cd-is-visible') : $('.back-to-top').removeClass('cd-is-visible cd-fade-out');  
  }).trigger('scroll');  
  $(window).resize(function() {  
  var right = (($(window).width() - $('section').width())/2)+95;  
  if ($('nav.sidebar').hasClass('affix')) {  
  $('nav.sidebar').css('right', right+'px');  
  }  
  }).trigger('resize');  
  $('.back-to-top').on('click', function(event) {  
  event.preventDefault();  
  $('html,body').animate({  
  scrollTop: 0  
  }, 700);  
  });  
</script>


avatar

Fontisto - новый иконочный шрифт

Fontisto - новый знаковый (иконный) шрифт, который включает более 360 пиктографических значков и набор инструментов CSS для легкой настройки размера, цвета, тени и всего остального с помощью CSS.

Иконочный шрифт font awesome для uCoz

Font Awesome предлагает вам масштабируемые векторные иконки, которые вы можете с легкостью персонализировать — размер, цвет, тени и все, что можно сделать силами CSS.

Правила чата
Пользователи онлайн
Мини-чат
+Мини-чат
0
Онлайн всего: 1
Гостей: 1
Пользователей: 0