П`ятниця, 25.07.2025, 01:42
Приветствую Вас Гість | Регистрация | Вход

4web-master.at.ua

Меню сайта
Програми
Windows
Ігри на Андроїд
Ігри
Реклама
Вход на сайт
Поиск
Календарь
«  Липень 2015  »
Пн Вт Ср Чт Пт Сб Нд
  12345
6789101112
13141516171819
20212223242526
2728293031
Архив записей
Наш опрос
Оцените мой сайт
Всього відповідей: 9
Статистика

Онлайн всього: 1
Гостей: 1
Користувачів: 0

Блог

Главная » 2015 » Липень » 28 » Как сделать кнопку "Вверх" для сайта на uCoz
23:21
Как сделать кнопку "Вверх" для сайта на uCoz
Как сделать кнопку Вверх для сайта на uCoz

Сегодня я покажу вам как самостоятельно сделать кнопку "Вверх" для uCoz сайта. После пролистывания страницы вниз с правой или левой стороны вы увидите появившуюся кнопку "Наверх" при нажатии на которую произойдет плавное прокручивание страницы вверх. 

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

Как обычно - первые варианты самые легкие, они выводят обычную кнопку без надписи и других эффектов. 

Способ 1. Серая кнопка вверх для uCoz с синей стрелкой: 

Для установки этой кнопки нужно зайти в Панель управления -> Дизайн -> Управление дизайном (шаблоны) -> Нижняя часть сайта и вставить этот скрипт:

КОД
<script src="http://uguide.ru/templates/uguide_ru.js" type="text/javascript"></script>



 

Способ 2. Серая кнопка Вверх с зеленой стрелкой:

Для установки так же вставляем данный скрипт в Нижнюю часть сайта:
КОД
<script src="http://uguide.ru/templates/uguide_ru2.js" type="text/javascript"></script>
Все, теперь когда вы долистаете страницу сайта в самый низ справа появится данная кнопка, которая поднимет вас в самый верх.
 
Способ 3. Серая кнопка "Наверх":

Вставляем данный код в Нижнюю часть сайта:
КОД
<a href="javascript://" onclick="$('body').scrollTo({top:$('body').offset().top, left:0}, 1500);return false;">  
<div style="position:fixed; opacity:0.8; bottom:0px; right:0px;" id="fImgtotop"> 
<img title="Вверх" src="http://uguide.ru/templates/up4.png" border="0"></div></a>

Следующий вариант чуть посложнее...
 
Способ 4. Серебристая кнопка с красной стрелкой и надписью "Вверх":

При скроллинге страницы вниз кнопка появляется в правом нижнем углу.
Что бы установить эту кнопку нужно в ПУ -> Дизайн -> Управление дизайном (шаблоны) -> Нижняя часть сайтавставить код:
КОД
<a href="#" id="toTop">Вверх <img src="http://uguide.ru/templates/up3.gif" border="0" align="absmiddle" /></a>  
<script src="http://uguide.ru/templates/uguide_ru3.js" type="text/javascript"></script>  
<script type="text/javascript">  
$(function() {  
$("#toTop").scrollToTop();  
});  
</script>
После этого в "Таблицу стилей (css)" добавить такой код:
КОД
#toTop {  
  width: 100px;  
  background: #f1f1f1;  
  border: 1px solid #cccccc;  
  text-align: center;  
  padding: 5px;  
  position: fixed;  
  bottom: 10px;  
  right: 10px;  
  cursor: pointer;  
  color: #666666;  
  text-decoration: none;}


Сохраняемся и на этом установка закончена.

И, последний вариант кнопки Вверх для uCoz.
 
Способ 5. Синяя кнопка Вверх:

Немного похожа на кнопку как ВКонтакте, но несколько отличается. По умолчанию кнопка "Вверх" выводится с левой стороны в верхнем углу и кликабельна по всей высоте сайта. По желанию ее можно переместить вправо.
Для установки нужно скопировать этот код в нижнюю часть сайта:
КОД
<script type="text/javascript" src="http://uguide.ru/templates/uguide_ru4.js"></script>  
<div class="upTop blue">  
  <div class="upTopZone"><p>Вверх</p></div>  
  <div class="upTopButton"></div>  
</div>

Теперь, добавляем в Таблицу стилей (css) код: 
КОД
.upTop {  
  display:none;  
  width:100px;  
  height:100%;  
  position:fixed;  
  left:0px;  
  top:0px;  
  z-index:100;  
}  
.upTopButton {  
  background:#777777 url(http://uguide.ru/templates/goup.png) no-repeat;  
  width:27px;  
  height:27px;  
  position:fixed;  
  top:10px;  
  left:10px;  
  cursor:pointer;  
}  
.upTopZone {  
  display:none;  
  background:url(http://uguide.ru/templates/upbg.png) repeat;  
  width:100px;  
  height:100%;  
  cursor:pointer;  
}  
.upTopZone p {  
  background:#777777;  
  font-size:12px;  
  width:63px;  
  height:27px;  
  margin:0;  
  position:fixed;  
  top:10px;  
  left:37px;  
  color:#fff;  
  font-family:"tahoma", "verdana", "arial";  
  line-height:25px;  
  text-align:center;  
  text-shadow:1px 1px 1px #000000;  
}  
@media screen and (max-width:1024px) {  
  .upTopZone {  
  display:none !important;  
  }  
} .blue .upTopButton, .blue .upTopZone p {  
  background-color:#3fa3e1;  
}  
.green .upTopButton, .green .upTopZone p {  
  background-color:#60bf3a;  
}  
.red .upTopButton, .red .upTopZone p {  
  background-color:#ca2929;  
}  
.orange .upTopButton, .orange .upTopZone p {  
  background-color:#ef990b;  
}  
.purple .upTopButton, .purple .upTopZone p {  
  background-color:#b053a0;  
}  
.grey .upTopButton, .grey .upTopZone p {  
  background-color:#777777;  
}

 

Для изменения цвета кнопки нужно заменить класс 
  • blue - голубой 
  • green - зеленый 
  • red - красный 
  • orange - оранжевый 
  • purple - пурпурный 
  • grey - серый

На этом все. Вот такими нехитрыми манипуляциями вы сможете добавить кнопку "Вверх" для своего сайта. По умолчанию на uCoz она не установлена, но в некоторых случаях может быть даже очень полезной. Если будут какие-то вопросы по установке - задавайте через каменты или социальные сети

Просмотров: 725 | Добавил: volodumur | Рейтинг: 0.0/0