Серые по своему дизайн кнопки для поднятие и опустить страницу на сайте. Все полностью создано на стилях и нет в нем не одной ссылки. Будут стоять с правой стороны монитора, также на них есть эффект. Который заключается в том, что при наведение из серой гаммы становится темнее, и безусловно знак виде пальца. Здесь тематика безусловно разная и можно сказать на любой сайт или блог можно поставить. Также нужно заметить, что идет плавный скролинг, что гораздо лучше быстрого и все с разбегом поднимает. Если будет показывать сразу 2 кнопки, то означает, сто вы опустили страницу или подняли и она находиться по центру или внизу, а так всегда вы будете видеть одну основном, когда выше поднимете и наоборот.
Установка:
В низ сайта ставим Html для отображения кнопки
Код
<!-- Кнопки Вверх и Вниз -->
<div class="go-up" title="Вверх" id='ToTop'>☝</div>
<div class="go-down" title="Вниз" id='OnBottom'>☟</div>
<!-- / Кнопки Вверх и Вниз -->
И тут же далеко не уходим а ставим ниже скрипт.
Код
<!-- Кнопки Вверх и Вниз -->
<script>
$(function(){
if ($(window).scrollTop()>="250" ) $("#ToTop").fadeIn("slow" )
$(window).scroll(function(){
if ($(window).scrollTop()<="250")$("#ToTop") .fadeOut("slow")
else $("#ToTop") .fadeIn("slow")
});
if ($(window).scrollTop()<=$(document).height()-"999")$("#OnBottom") .fadeIn("slow")
$(window).scroll(function(){
if ($(window).scrollTop()>=$(document).height()-"999") $("#OnBottom").fadeOut("slow")
else $("#OnBottom").fadeIn("slow")
});
$("#ToTop") .click(function(){$("html,body") .animate({scrollTop:0},"slow") })
$("#OnBottom") .click(function(){$("html,body") .animate({scrollTop:$(document).height()},"slow") })
});
</script>
<!-- / Кнопки Вверх и Вниз -->
CSS
Код
.go-up, .go-down {
display: none;
position: fixed; /*позиционирование*/
z-index: 9999; /*поверх все элементов на странице*/
right: 1%; /*положение на странице, если слева - left*/
background: #4F4F4F;
border: 1px solid #ccc;
border-radius: 5px;
cursor: pointer;
color: #fff;
text-align: center;
font: normal normal 32px/32px sans-serif;
text-shadow: 0 1px 2px #000;
opacity: .5;
padding: 3px;
margin-bottom: 5px;
width: 32px;
height: 32px;
}
.go-up { bottom: 60px; }
.go-down { bottom: 10px; }
.go-down:hover,
.go-up:hover {
opacity: 1;
box-shadow: 0 5px 0.5em -1px #666;
}
| 
