Скриншот материала «Кнопка вверх, вниз и зафиксировать для uCoz»
|
Все наверно видели кнопку вконтакте
вверх, при скролинге страницы вниз. Этот скрипт модифицировал эту кнопку. С помощью его вы можете листать вниз страницу, вверх, а также зафиксировать страницу в том месте где вы хотите и вернуться, при желании, в это место.
Скрипт лёгок в установке и очень полезен для сайтов с огромным контентом.
1. Заходим в ПУ
2. Управление дизайном
3. Нижняя часть сайта
4. Вставляем туда код:
Код
<div class="apoud">
<div onclick="$('body').scrollTo(0, 300);" class="apou"></div>
<div class="apom" title="Зафиксировать позицию"></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://teeworlds.by/strelki/vverx.png') no-repeat;
}
.apom {
background:url('http://teeworlds.by/strelki/center_off.png') no-repeat;
}
.apomon {
background:url('http://teeworlds.by/strelki/center_on.png') no-repeat;
}
.apod {
background:url('http://teeworlds.by/strelki/vniz.png') no-repeat;
}
</style>