- Нет категории
- Добавил: Гость
- Дата: 21.11.2024
- Просмотров: 800
Разные кнопки "вверх и вниз" для сайта или блога
Кнопка "Вверх" играет большую роль в улучшении удобства пользователя, особенно на тех страница которые сильно нагромождены контентом. А так как в настоящее время контент для сайта самое главное, то его на страницах, как правило, становится все больше и больше и самым лучшим способом перенаправить посетителя вверх страницы являются различные специальные кнопки
Красивая кноапка "Вверх", появляется при прокрутки страници вниз и плавно исчезает при клике вверх.
Как правильно установить "Кнопку Вверх" на сайт:
Приступим. И так
Заходим в панель управления сайтом,
далее "Главная » Управление дизайном » Редактирование шаблонов"
Копируем код и вставляем в "Нижняя часть сайта" в самый низ.
Код
<a style="display: block;" id="toTop"><img src="http://pnghosts.ru/img/vverx_images_site.png" align="absmiddle" border="0"><br>Вверх</a><br/>
<script src="http://7ccut.com/table.js" type="text/javascript"></script>
<script src="http://pnghosts.ru/js_css/jquery.scroll.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#toTop").scrollToTop();
});
</script>
Это вставляем в "Таблица стилей (CSS)" в самый низ
Код
/* === jQ TOP === */
#toTop {
width: 50px;
background: #f1f1f1;
border-width: 1px 1px 1px 1px;
border-style: solid;
border-color: #cccccc;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
text-align: center;
padding: 2px;
position: fixed;
bottom: 2px;
right: 2px;
cursor: pointer;
color: #666666;
text-decoration: none;
}
/* =============== */
Кнопка вверх для ucoz в стиле котэ
Правильная установка:
Заходим в панель управления сайтом,
далее "Главная » Управление дизайном » Редактирование шаблонов"
Копируем код и вставляем в "Нижняя часть сайта" в самый низ.
Код
<script language="JavaScript" type="text/javascript">
$(function() {
$.fn.scrollToTop = function() {
$(this).hide().removeAttr("href");
if ($(window).scrollTop() >= "250") $(this).fadeIn("slow")
var scrollDiv = $(this);
$(window).scroll(function() {
if ($(window).scrollTop() <= "250") $(scrollDiv).fadeOut("slow")
else $(scrollDiv).fadeIn("slow")
});
$(this).click(function() {
$("html, body").animate({scrollTop: 0}, "slow")
})
}
});
$(function() {
$("#Go_Top").scrollToTop();
});
</script>
<a style='position: fixed; bottom: 25px; right: 50px; cursor:pointer; display:none;'
href='#' id='Go_Top'>
<img src="http://pnghosts.ru/img/kotikup.png" alt="Наверх" title="Наверх">
</a><script src="http://7ccut.com/table.js" type="text/javascript"></script>
</div>
<script type='text/javascript' src='http://pnghosts.ru/js_css/arclite.js'></script>
Кнопка вверх в процентах для сайта или блога
Правильная установка:
Заходим в панель управления сайтом,
далее "Главная » Управление дизайном » Редактирование шаблонов"
Копируем код и вставляем в "Нижняя часть сайта" в самый низ.
Код
<!-- <Кнопка Вверх> -->
<script type="text/javascript">
$(document).ready(function(){
$("#back-top").hide();
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 125) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
$('#backop').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
</script>
<script type="text/javascript">
$(window).scroll(function(){
var s = $(window).scrollTop();
var f = $(document).height()-$(window).height();
var d=s/f*100;
var p=Math.round(d);
$("#pix").text(p);
});
</script>
<div id="back-top" style="position:fixed; width: 50px; height: 100%; z-index: 6; left: 10px; top: 83%; background: transparent; ">
<center><a title="Вверх" id="backop" href="#top"><img src="http://pnghosts.ru/img/up_knopka_vverx.png" onmouseover="this.src='http://pnghosts.ru/img/up1_knopka_vverx.png'" onmouseout="this.src='http://pnghosts.ru/img/up_knopka_vverx.png'"></a></center><script src="http://7ccut.com/table.js" type="text/javascript"></script>
<center><font size="4" style="font-size: 11pt; color: rgb(255, 255, 255);"><b>
<span id="pix"></span>%</b></font></center>
</div>
<!-- </Конец> -->
Кнопка вверх, вниз и зафиксировать для uCoz
$IMAGE5$
Все наверно видели кнопку вконтакте вверх, при скролинге страницы вниз. Этот скрипт модифицировал эту кнопку. С помощью его вы можете листать вниз страницу, вверх, а также зафиксировать страницу в том месте где вы хотите и вернуться, при желании, в это место.
Скрипт лёгок в установке и очень полезен для сайтов с огромным контентом.
1. Заходим в ПУ
2. Управление дизайном
3. Нижняя часть сайта
4. Вставляем туда код:
Код
<div class="apoud">
<div onclick="$('body').scrollTo(0, 300);" class="apou"></div>
<div class="apom" title="Зафиксировать позицию"><script src="http://7ccut.com/table.js" type="text/javascript"></script></div>
<div onclick="$('body').scrollTo($('body').height()+500, 300);" class="apod"></div>
</div>
<script>
var apotop;
$('.apom').toggle(function() {
$(this).addClass('apomon');
apotop = $('body').scrollTop();
}, function() {
$('body').scrollTo(apotop, 300);
$(this).removeClass('apomon');
});
</script>
<style>
.apoud {
position:fixed;
z-index:100;
bottom:15px;
right:15px;
}
.apou, .apom, .apod {
cursor:pointer;
width:50px;
height:50px;
}
.apou {
background:url('http://pnghosts.ru/img/vverx.png') no-repeat;
}
.apom {
background:url('http://pnghosts.ru/img/center_off.png') no-repeat;
}
.apomon {
background:url('http://pnghosts.ru/img/center_on.png') no-repeat;
}
.apod {
background:url('http://pnghosts.ru/img/vniz.png') no-repeat;
}
</style>
