П`ятниця, 25.07.2025, 01:42
Приветствую Вас Гість | Регистрация | Вход
|
4web-master.at.ua |
| Календарь |
|---|
| « Липень 2015 » |
| Пн |
Вт |
Ср |
Чт |
Пт |
Сб |
Нд |
| | | 1 | 2 | 3 | 4 | 5 | | 6 | 7 | 8 | 9 | 10 | 11 | 12 | | 13 | 14 | 15 | 16 | 17 | 18 | 19 | | 20 | 21 | 22 | 23 | 24 | 25 | 26 | | 27 | 28 | 29 | 30 | 31 | |
| Статистика |
|---|
Онлайн всього: 1 Гостей: 1 Користувачів: 0 |
|
Блог
Главная » 2015 » Липень » 28 » Как сделать кнопку "Вверх" для сайта на uCoz
23:21 Как сделать кнопку "Вверх" для сайта на 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 |
|
|
