Как сделать кнопку

Как сделать кнопку "Вверх" для сайта на uCoz

  • Обновлено:
    2013-04-30
  • Просмотры:
    23236
  • Отзывы:
    35
  • Рейтинг: 9.6
Хочу предложить вам сразу несколько вариантов оформления кнопки ВВЕРХ, а какую устанавливать вы выберите сами. Как обычно - первые варианты самые легкие, они выводят обычную кнопку без надписи и других эффектов.

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

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



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

Код
<script src="https://uguide.ru/templates/uguide_ru.js" type="text/javascript"></script>

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


Для установки так же вставляем данный скрипт в Нижнюю часть сайта:
Код
<script src="https://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="https://uguide.ru/templates/up4.png" border="0"></div></a>

Следующий вариант чуть посложнее...
 

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



При скроллинге страницы вниз кнопка появляется в правом нижнем углу.
Что бы установить эту кнопку нужно в ПУ -> Дизайн -> Управление дизайном (шаблоны) -> Нижняя часть сайта вставить код:
Код
<a href="#" id="toTop">Вверх <img src="https://uguide.ru/templates/up3.gif" border="0" align="absmiddle" /></a>  
<script src="https://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="https://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(https://uguide.ru/templates/goup.png) no-repeat;  
  width:27px;  
  height:27px;  
  position:fixed;  
  top:10px;  
  left:10px;  
  cursor:pointer;  
}  
.upTopZone {  
  display:none;  
  background:url(https://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 она не установлена, но в некоторых случаях может быть даже очень полезной. Если будут какие-то вопросы по установке - задавайте через каменты или социальные сети

  • Автор:

no avatar

Комментариев:35
1 2 »

нет аватара
uid
Максим Федяев • 19:29, 2016-12-16
Спасибо. Поставил себе на сайт кнопку номер 3. Картинку переделал, только.
quirquinchos
теперь у меня пятая кнопка можете посмотреть сами , кто не верит на моем сайте день по испански
нет аватара
Вот спасибо за стрелку. Супер! Без лишних телодвижений,все просто. Спасибо админ!
poparim
uid
Николай • 05:15, 2016-02-05
Всем добра. Если у Вас после установки не работает кнопка, попробуйте: в ПУ -> Общие настройки поменять версию библиотеки jQuery.
JOCONDA
vk
Нина Ткаченко • 22:34, 2016-02-04
Спасибо за кнопочку ВВерх!Использовала второй вариант-зеленую стрелочку.Вот еще бы такую же сделать "Вниз"...Но я не знаю как...Не поможете с этим?
sosnovka_31
Спасибо большое!!! Всё так просто! И всё прекрасно работает! Спасибо!!!
z1M
uid
z1M • 15:10, 2016-01-17
Как сделать с другой с правой стороны?
latnatbron
gp
Наташа Латышева • 07:42, 2016-01-07
Спасибо! Первый способ работает и ничего лишнего!
нет аватара
uid
Дмитрий Клещёв • 11:36, 2016-01-06
Молодец, доходчиво и понятно. Еще раз спасибо!
нет аватара
ya
Юлия Захарова • 11:14, 2016-01-05
Спасибо! Всё очень доступно даже для начинающих!
MaxxBr
vk
Максим • 16:29, 2015-11-18
Также советую попробовать эти кнопочки, мне очень понравились, забрал себе. Вверх - вниз и ничего лишнего.

Дизайн - Управление дизайном - Нижняя часть сайта - Вставляем в самый низ, наслаждаемся. Ничего лишнего, всё просто!
poparim
uid
Николай • 04:46, 2015-08-09
Спасибо.
quirquinchos
попробовала и первую и четвертую и пятую , все работают,  остановилась на четвертой, спасибо,
и это , что я не разбираюсь в программирование, класс!!
Skyer
uid
Кирилл • 00:08, 2015-03-19
Четвертый точно также, внизу посередине высвечивается надпись вверх , да она активная, но стиля вообще нет... второй нормально заработал.
Perseus
uid
Олег Колчанов • 03:19, 2015-03-17
Все отлично работает, только вот незадача: кнопка появляется исключительно на главной, а хотелось бы чтобы она присутствовала и на страницах разделов и категорий. Подскажите, что нужно сделать, чтобы получить желаемое?
Использую первый вариант (серая с синей стрелкой), код установлен в самый низ футера.
нет аватара
uid
Igor Filonov • 07:27, 2015-03-05
Как сделать чтобы кнопка располагалась ближе к центру? 2 способ.
нет аватара
uid
Максим Ванин • 16:18, 2015-02-06
Классно, работает, не подскажите как сделать что бы кнопка была справа внизу. Использовал 5 способ. Заранее спасибо!
нет аватара
uid
VictorP • 12:55, 2017-02-07
В upTopButton заменить top:10px; на top:420px;
и в .upTopZone p тоже самое
нет аватара
uid
Наталя Галазюк • 11:11, 2015-01-22
Большое спасибо. Все работает.
нет аватара
Спасибо большое! Ваши статьи очень помогают! Все написано доступным языком!
Хотелось бы почитать материал по установке тегов h1, h2 и h3. Заранее спасибо!
kupina
uid
Наталья • 06:56, 2015-01-03
Поставила кнопку на два своих сайта. Всё работает. Большое спасибо!
Андрей6306
uid
Андрей • 21:10, 2014-11-25
Большое спасибо, все очень понятно!  respect
нет аватара
uid
Natalya Shestuhina • 22:06, 2014-11-01
Большое спасибо, все очень просто оказалось!
Grabber
uid
Vladimir • 03:12, 2014-10-13
В способе 5 в стиле(.upTopZone p) надо дописать(padding:0;)
иначе кнопка может быть широкой
нет аватара
uid
Ята Аталия • 02:36, 2014-09-26
hands Спасибо, очень помогла статья.
нет аватара
uid
Taurus • 20:32, 2014-09-13
Печально видеть, что вместо того чтобы исправлять свои ошибки, авторы скрипта просто трут неугодные комментарии. Чтож, я напишу снова. Всякий желающий может зайти на мой сайт, где установлен этот скрипт, и посмотреть, что же за текст выводится при наведении курсора на стрелку. Например  stroni4ka.ru/forum  Вместо логичной надписи "Наверх" мы видим там надпись "Ia aa?o". Сама-то стрелка, впрочем, работает, но давайте таки назовём вещи своими именами - скрипт кривой.
uGuide
uid
Дмитрий Луценко • 12:57, 2014-10-07
Исправлено
1 2 »
Добавить комментарий